@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════
   STYLES COMMUNS DE base.html — perf 16/10 (boss : « le site à la vitesse
   de l'éclair sur toutes les pages »).

   Ces règles vivaient dans deux <style> EN LIGNE de templates/base.html :
   60 Ko renvoyés avec CHAQUE page, jamais mis en cache. Elles sont copiées
   ici valeur pour valeur, dans le même ordre :
     1. le bloc du <head> (barre latérale, plateforme connectée, impression) ;
     2. le bloc du début du <body> (tableaux, coquille Android, mobile,
        formulaires de facture, offre gratuite, thème Health).
   La feuille est chargée À LA PLACE du premier bloc : après ui.css et
   après le bloc extra_head des pages, avant les <style> de leur contenu —
   l'ordre de cascade de chaque règle est celui d'avant.
   Entre les deux anciens blocs ne vivait que la puce « vu comme »
   (.imp-chip), qu'aucune règle d'ici ne vise : les réunir ne change aucun
   gagnant de cascade, et une feuille du <head> ne clignote jamais.

   Modifier ce fichier = bumper ?v= dans base.html ET réécrire
   static/css/base.css.version (« <version> <sha1> », pré-porte).
   ════════════════════════════════════════════════════════════════════════ */

/* ═══ 1. Ancien <style> du <head> de base.html ═══ */
      /* ── Core sidebar accordion (indigo) — groupes pliables avec
         hiérarchie visuelle claire : header gros, items indentés. ──── */
      .core-acc { margin: 4px 0; }
      .erp-sub { margin: 2px 0; }
      /* Spécificité montée (.core-acc .erp-sub) pour battre `.core-acc summary`
         qui, à égalité, gagnait par ordre source et rendait ces sous-titres
         gros + bleus. Ici : petits, gris, en capitales. */
      .core-acc .erp-sub > summary { font-size:.58rem; font-weight:700; text-transform:uppercase;
                   letter-spacing:.07em; color:#94a3b8; padding:7px 14px 3px;
                   cursor:pointer; list-style:none; display:flex; align-items:center;
                   gap:6px; user-select:none; background:transparent; margin:0; border-radius:0; }
      .core-acc .erp-sub > summary::-webkit-details-marker { display:none; }
      .core-acc .erp-sub > summary:hover { color:#475569; background:transparent; }
      .core-acc .erp-sub[open] > summary { color:#94a3b8; background:transparent; }
      .erp-sub-chev { margin-inline-start:auto; font-size:.54rem; opacity:.7;
                      transition:transform .15s ease; }
      .erp-sub[open] > summary .erp-sub-chev { transform:rotate(180deg); }
      .core-acc details {
        background: transparent;
        border: none;
        margin-bottom: 2px;
      }
      .core-acc summary {
        list-style: none;
        cursor: pointer;
        padding: 10px 14px;
        font-size: 0.88rem;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 10px;
        user-select: none;
        border-radius: 8px;
        margin: 0 6px;
        transition: background .12s, color .12s;
      }
      .core-acc-link {
        padding: 10px 14px;
        font-size: 0.88rem;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        margin: 0 6px;
        text-decoration: none;
        transition: background .12s, color .12s;
      }
      /* PASTILLE D'AIDE ⓘ COUPÉE À DROITE (boss 09/09, capture à l'appui).
         Elle n'avait AUCUNE règle : simple <i> en flux dans un conteneur
         flex, elle était poussée hors du cadre dès que le libellé s'allongeait
         (« Journal de caisse », « Carnet de crédit »). Trois règles suffisent :
         le libellé accepte de rétrécir (sans min-width:0 un flex refuse de
         passer sous la largeur de son contenu), la pastille ne rétrécit
         jamais, et elle se colle à droite au lieu de suivre le texte. */
      .app-sidebar .sidebar-link > span,
      .app-sidebar .core-acc-link > span {
        flex: 1 1 auto; min-width: 0;
        /* Le libellé PASSE À LA LIGNE au lieu d'être tronqué (boss 09/09,
           deuxième capture : « Pointeuse biométr… », « Aide & configuratio… »).
           `white-space: normal` est explicite à dessein : sans lui, un
           `nowrap` hérité d'une règle plus générale suffirait à couper le
           texte, et rien dans cette déclaration ne dirait pourquoi. */
        white-space: normal;
        /* `break-word`, PAS `anywhere` (boss 18/09, capture « Confirmation / s »
           sous E-commerce) : `anywhere` compte chaque lettre comme une
           coupure possible, donc le libellé en flex se laisse écraser par
           l'icône et la pastille et casse un mot seul en plein milieu.
           `break-word` garde la largeur du mot le plus long : un mot seul
           reste entier, seul un texte plus large que le menu se coupe. */
        overflow-wrap: break-word;
      }
      .app-sidebar .sidebar-info {
        flex: 0 0 auto;
        margin-inline-start: auto;
        opacity: .55;
      }
      .core-acc-link:hover { background: rgba(2,77,236,0.08); color: #024dec; }
      .core-acc-link.active { background: rgba(2,77,236,0.10); color: #024dec; }
      /* Épinglés + étoile (boss 21/08) — design de la maquette validée */
      .sidebar-inner > .pin-zone { order:-500; }
      .sidebar-inner > .sect-label { order:-450; }
      /* Onglets Boutique / ERP — dans la BARRE DU HAUT, à côté du sélecteur
         de langue (boss 08/09 : « on the menu central, not in the menu »).
         Ils étaient d'abord dans la barre latérale, où l'absence de règle
         d'ordre flex les faisait tomber au milieu des modules. */
      .sidebar-vue-tabs { display:inline-flex; gap:3px; padding:3px;
        background:rgba(2,77,236,.05); border:1px solid rgba(2,77,236,.12); border-radius:9px; }
      .sidebar-vue-tabs .vue-tab { display:inline-flex; align-items:center; justify-content:center;
        gap:5px; padding:5px 10px; border:none; border-radius:6px; background:none; color:#475569;
        font-size:.72rem; font-weight:700; white-space:nowrap; cursor:pointer; }
      .sidebar-vue-tabs .vue-tab:hover:not(.active) { background:rgba(2,77,236,.09); color:#024dec; }
      .sidebar-vue-tabs .vue-tab.active { background:#024dec; color:#fff; cursor:default; }
      .sidebar-vue-tabs .vue-tab > i.bi { font-size:.95rem; }
      .sect-label { font-size:.6rem; font-weight:800; letter-spacing:.1em;
        text-transform:uppercase; color:#94a3b8; padding:12px 14px 4px;
        border-top:1px solid #eef0f5; margin-top:8px; }
      .pin-zone { padding-top:6px; }
      .pin-star-gold { color:#e0a417; }
      .pin-vide { padding:4px 14px 8px; color:#a6adbf; font-size:.72rem;
        font-style:italic; }
      /* sous-menus : décalés à droite avec trait de guidage (maquette) */
      .core-acc details > .sidebar-link:not(.compta-entree) {
        margin-inline-start:38px; border-inline-start:1.5px solid #e2e8f0;
        border-start-start-radius:0; border-end-start-radius:0; }
      .core-acc details > .sidebar-link.active,
      .core-acc details > .sidebar-link:hover { border-inline-start-color:#024dec; }
      /* chevron qui pivote + menu ouvert surligné (maquette) */
      .core-acc-chev { margin-inline-start:auto; font-size:.62rem; color:#94a3b8;
        transition:transform .18s ease; }
      .core-acc details[open] > summary > .core-acc-chev { transform:rotate(180deg); }
      .core-acc details[open] > summary { background:rgba(2,77,236,.08); color:#024dec; }

      .pin-head { font-size:.62rem; font-weight:800; letter-spacing:.08em;
        text-transform:uppercase; color:#e0a417; padding:6px 12px 4px; }
      .pin-link { position:relative; }
      /* GOUTTIÈRE fixe (boss 21/08 : « Documents semblait un menu majeur ») :
         toutes les lignes de haut niveau réservent 22px à gauche — l'étoile
         s'y pose en absolu, la colonne d'icônes reste alignée partout. */
      .core-acc summary, .sidebar-inner > [data-top].sidebar-link,
      .core-acc-link, .pin-link,
      .compta-entree { position:relative; padding-inline-end:30px; }
      .core-acc details > .sidebar-link { padding-inline-start:14px; }
      .core-acc summary .nav-star, .pin-link .nav-star, .compta-entree .nav-star,
      .core-acc-link .nav-star {
        opacity:.45; color:#b6bdcc; font-size:.9rem; width:22px; height:22px;
        display:grid; place-items:center;
        position:absolute; inset-inline-end:6px; top:50%;
        transform:translateY(-50%); text-align:center; cursor:pointer;
        border-radius:6px; transition:opacity .15s,color .15s; }
      .core-acc summary:hover .nav-star, .pin-link:hover .nav-star,
      .compta-entree:hover .nav-star,
      .core-acc-link:hover .nav-star { opacity:1; color:#94a3b8; }
      .nav-star:hover { color:#e0a417 !important; }
      .core-acc summary .nav-star.pinned, .pin-link .nav-star.pinned,
      .compta-entree .nav-star.pinned, .core-acc-link .nav-star.pinned,
      .nav-star.pinned { opacity:1 !important; color:#e0a417; }
      /* IMPRESSION (boss 22/08, bon A4 au fond gris = encre gâchée) :
         toute page imprimée sort sur FOND BLANC, sans chrome d'app —
         le thème pose un fond avec !important, on le bat ici. */
      @media print {
        html, body { background:#fff !important; }
        .app-sidebar, .navbar, .app-topbar, #yacine-root, .sidebar-backdrop,
        .messages-container { display:none !important; }
        /* Ticket 80 mm (boss 09/09 : « space on top of the ticket and the cut
           happen in the middle »). Les deux symptômes venaient d'ICI, pas du
           gabarit du ticket : `.app-main-content` porte `margin-left:240px`
           (la place de la barre latérale — imprimée en blanc, elle décale
           tout) et `min-height:calc(100vh - 68px)` (une hauteur d'écran
           imposée au PAPIER : sur un rouleau, cela fabrique une page de plus,
           et la découpe automatique tombe alors au milieu du ticket).
           La barre n'existe plus à l'impression : sa place non plus. */
        .app-main-content { margin-left:0 !important; margin-right:0 !important;
                            min-height:0 !important; }
        .site-footer.has-sidebar { margin-left:0 !important; }
      }
      /* Bandeaux de succès en BLEU Almawarid (boss 21/08) — le vert
         Bootstrap détonnait avec l'identité. Scopé aux notifications. */
      .messages-container .alert-success {
        background:#eef2ff; color:#024dec; border-color:#c7d2fe; }
      .messages-container .alert-success .btn-close {
        filter:invert(23%) sepia(93%) saturate(4029%) hue-rotate(221deg) brightness(93%); }
      /* ═══ PHASE 2 DESIGN (maquette 21/08) — PLATEFORME CONNECTÉE SEULEMENT.
         Scope RÉEL : connecté + in-tool (app-mode = coquille Android, pas « connecté » ! erreur du 21/08 corrigée). Public intact.
         Health (thème propre) exclu via :not(.theme-health). ═══ */
      body.design-scope:not(.theme-health) {
        background:#eef1f6 !important; /* theme.css pose un !important */
        font-family:'Manrope','Plus Jakarta Sans','Amiri',system-ui,sans-serif;
      }
      /* Topbar plateforme : barre compacte carte, marque à gauche,
         société + avatar à droite (le navbar public centré disparaît
         au profit de cette ligne épurée). */
      body.design-scope:not(.theme-health) .navbar {
        background:#fff !important; border-bottom:1px solid #e6e9f0;
        box-shadow:0 1px 2px rgba(20,24,40,.04); padding-top:.35rem;
        padding-bottom:.35rem;
      }
      body.design-scope:not(.theme-health) .navbar-brand img { height:30px; }
      body.design-scope:not(.theme-health) .navbar-brand small,
      body.design-scope:not(.theme-health) .navbar-brand .brand-sub { display:none; }
      /* Cartes génériques de la plateforme : rayon 14, ombre douce. */
      body.design-scope:not(.theme-health) .card {
        border:1px solid #e6e9f0; border-radius:14px;
        box-shadow:0 1px 2px rgba(20,24,40,.04), 0 8px 22px rgba(20,24,40,.05);
      }
      body.design-scope:not(.theme-health) .card .card-header {
        background:transparent; border-bottom:1px solid #eef0f5;
        font-weight:800;
      }
      /* Titres de page + libellés en petites capitales espacées. */
      body.design-scope:not(.theme-health) h1, body.design-scope:not(.theme-health) h2 {
        letter-spacing:-.02em; font-weight:800;
      }
      body.design-scope:not(.theme-health) .text-uppercase,
      body.design-scope:not(.theme-health) th {
        letter-spacing:.06em;
      }
      /* Tableaux : entêtes discrètes, chiffres tabulaires. */
      /* 28/09 (audit UX 27/09, UX-10) : l'en-tête était écrite en #8b93a7 —
         mesuré 2,53 à 2,82:1 selon l'apparence sur Formation/Matières, en
         petites capitales de .68rem. ui.css:208 portait DÉJÀ un correctif
         (`body.design-scope table th{color:#5b6376}`) et une note disant que
         2,8:1 était illisible dehors : il n'a jamais gagné, parce que
         `table thead th` est plus spécifique que `table th`. C'est la leçon
         du lot — une couleur écrite quelque part ne prouve pas la couleur
         rendue. On prend le jeton de corps atténué, qui suit les huit
         apparences ; la garde MESURE le rendu. */
      body.design-scope:not(.theme-health) table thead th {
        font-size:.68rem; text-transform:uppercase; color:var(--ink-600);
        font-weight:700; border-bottom-width:1px;
      }
      body.design-scope:not(.theme-health) td { font-variant-numeric:tabular-nums; }
      /* Boutons — système cohérent (boss 21/08, capture Exporter/Importer) :
         PRIMAIRE plein + ombre portée ; SECONDAIRE blanc bordé, icône
         colorée, hover accent — fini les pastels délavés dépareillés. */
      body.design-scope:not(.theme-health) .btn { border-radius:10px; font-weight:600; }
      body.design-scope:not(.theme-health) .btn-primary {
        box-shadow:0 2px 8px rgba(2,77,236,.25); border:none;
        transition:transform .12s ease, box-shadow .12s ease; }
      body.design-scope:not(.theme-health) .btn-primary:hover {
        transform:translateY(-1px); box-shadow:0 4px 14px rgba(2,77,236,.32); }
      body.design-scope:not(.theme-health) .btn-second {
        background:#fff; color:#1e2436; border:1px solid #dbe0e8;
        box-shadow:0 1px 2px rgba(20,24,40,.04);
        transition:border-color .12s ease, color .12s ease, background .12s ease; }
      body.design-scope:not(.theme-health) .btn-second:hover {
        border-color:#024dec; color:#024dec; background:#f8faff; }
      body.design-scope:not(.theme-health) .btn-second i { color:#024dec; }
      body.design-scope:not(.theme-health) .btn-second.btn-second-ok i { color:#15803d; }
      /* La sidebar passe sur fond carte blanc franc (maquette). */
      body.design-scope:not(.theme-health) .app-sidebar {
        background:#fff; border-right:1px solid #e6e9f0;
      }
      /* ── SIDEBAR = CSS DE LA DÉMO, transplanté valeur pour valeur (boss
         21/08, 3e passe : fini les retouches, on copie la maquette). ── */
      body.design-scope:not(.theme-health) {
        --d-ink:#1e2436; --d-ink2:#5b6478; --d-ink3:#8b93a7;
        --d-line:#e6e9f0; --d-hover:#f2f3f8;
        --d-active-bg:#eef2ff; --d-active-ink:#4338ca; --d-pin:#e0a417;
      }
      body.design-scope:not(.theme-health) .sidebar-inner { padding:10px 8px; }
      /* lignes de haut niveau : 9px/10px, rayon 9, 14px/600, gouttière 32 */
      /* rythme vertical UNIFORME (boss 21/08 : espaces inégaux) : les
         blocs .core-acc et details perdent leurs marges propres — seule la
         ligne porte un margin-block fixe, identique partout. */
      body.design-scope:not(.theme-health) .core-acc { margin:0 !important; }
      body.design-scope:not(.theme-health) .core-acc details { margin:0 !important; }
      /* GOUTTIERE DE 32 px — la liste ci-dessous doit couvrir TOUTE ligne de
         premier niveau de la barre laterale. « Documents » demarrait 18 px a
         gauche de ses voisines (capture boss 12/09) : un module SANS
         accordeon rend un <a class="core-acc-link"> direct, et c'etait le
         seul cas absent d'ici — il gardait donc le padding de base
         10px/14px. La pilule active (.core-acc-link.active) l'avait bien,
         mais ni le padding, ni le survol, ni la colonne d'icones. Toute
         nouvelle ligne de premier niveau s'ajoute aux TROIS regles ;
         SidebarGouttiereUniformeTests mesure la couverture et rougit. */
      body.design-scope:not(.theme-health) .compta-entree,
      body.design-scope:not(.theme-health) .core-acc summary,
      body.design-scope:not(.theme-health) .sidebar-inner > .sidebar-link,
      body.design-scope:not(.theme-health) .core-acc[data-top] .sidebar-link,
      body.design-scope:not(.theme-health) .sidebar-inner .core-acc > .core-acc-link,
      body.design-scope:not(.theme-health) .pin-link {
        display:flex; align-items:center; gap:11px;
        padding:9px 10px 9px 32px; margin:2px 2px; border-radius:9px;
        font-size:14px; font-weight:600; color:var(--d-ink); line-height:1.3;
      }
      body.design-scope:not(.theme-health) .core-acc summary:hover,
      body.design-scope:not(.theme-health) .pin-link:hover,
      body.design-scope:not(.theme-health) .sidebar-inner .core-acc > .core-acc-link:hover,
      body.design-scope:not(.theme-health) .sidebar-inner > .sidebar-link:hover {
        background:var(--d-hover); color:var(--d-ink);
      }
      /* actif/ouvert : PILULE INDIGO CLAIR (maquette), pas bleu plein */
      body.design-scope:not(.theme-health) .sidebar-inner .sidebar-link.active,
      body.design-scope:not(.theme-health) .core-acc-link.active,
      body.design-scope:not(.theme-health) .core-acc details[open] > summary {
        background:var(--d-active-bg) !important; color:var(--d-active-ink) !important;
      }
      body.design-scope:not(.theme-health) .core-acc details[open] > summary i:not(.nav-star),
      body.design-scope:not(.theme-health) .sidebar-inner .sidebar-link.active i:not(.nav-star) {
        color:var(--d-active-ink) !important;
      }
      /* chevrons fins qui pivotent */
      body.design-scope:not(.theme-health) .core-acc-chev {
        margin-inline-start:auto; font-size:11px; color:var(--d-ink3);
      }
      /* sections : mono, 10.5px, gris — étoile OR (démo) */
      body.design-scope:not(.theme-health) .pin-head,
      body.design-scope:not(.theme-health) .sect-label {
        font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:10.5px;
        font-weight:600; letter-spacing:.12em; text-transform:uppercase;
        color:var(--d-ink3); padding:13px 11px 5px; border:none; margin:0;
      }
      body.design-scope:not(.theme-health) .pin-head .pin-star-gold { color:var(--d-pin); }
      /* Repli « Tous les modules » (boss 21/08 : on ne voit que les
         épinglés ; le reste sous le déplieur). data-top reste visible. */
      /* Gabarit ÉTROIT centré : la règle « container fluide sous sidebar »
         (style.css, !important) écrasait les max-width inline des pages
         de saisie (caisse pleine largeur, boss 22/08). */
      .app-main-content .page-etroite { max-width:680px !important; margin-inline:auto !important; }
      /* colonne d'icônes uniforme — le glyphe ◔ du Dashboard flottait
         petit et décalé (boss 22/08) */
      body.design-scope:not(.theme-health) .compta-entree > i.bi,
      body.design-scope:not(.theme-health) .core-acc summary > i.bi:not(.core-acc-chev),
      body.design-scope:not(.theme-health) .sidebar-inner > .sidebar-link > i.bi,
      body.design-scope:not(.theme-health) .core-acc[data-top] .sidebar-link > i.bi,
      body.design-scope:not(.theme-health) .sidebar-inner .core-acc > .core-acc-link > i.bi {
        width:18px; flex:0 0 18px; text-align:center; font-size:15px;
        line-height:1; display:inline-flex; align-items:center; justify-content:center; }
      .core-acc details > .sidebar-link { position:relative; }
      /* Sous-étoiles : ABSOLUES dans la gouttière (le -28px était ignoré en
         static → l'étoile grise tombait en fin de ligne, invisible ; seul
         l'or ressortait — capture boss 24/08 « pas d'étoile sur Tableau de
         bord »). Grise visible au repos, comme les étoiles de section. */
      /* 27/09 : l'étoile était posée à -28px, HORS de la ligne — et
         `.sidebar-link{overflow:hidden}` (style.css:196, l'ellipse des libellés
         longs) la coupait entièrement : invisible ET incliquable. Le balayage
         des panneaux coupés l'a mise au jour. Elle revient DANS la ligne, au
         bord de fin, avec la réserve de place qui va avec. */
      .core-acc details > .sidebar-link { padding-inline-end:26px; }
      .core-acc details > .sidebar-link .nav-star.sub-star {
        position:absolute; inset-inline-start:auto; inset-inline-end:6px; top:50%;
        transform:translateY(-50%); font-size:.72rem;
        opacity:.45; color:#b6bdcc; }
      .core-acc details > .sidebar-link:hover .nav-star.sub-star { opacity:1; color:#94a3b8; }
      .core-acc details > .sidebar-link .nav-star.sub-star.pinned {
        opacity:1 !important; color:#e0a417; }
      .sect-toggle { cursor:pointer; user-select:none; }
      .sect-toggle .sect-chev { display:inline-block; font-size:9px;
        transition:transform .18s ease; }
      .sidebar-inner.mods-replies .sect-toggle .sect-chev { transform:rotate(-90deg); }
      .sidebar-inner.mods-replies > .core-acc:not([data-top]) { display:none; }
      /* séparateurs orphelins (boss 22/08 : traits empilés à vide) */
      .sidebar-inner.mods-replies > .core-acc:not([data-top]) + .sidebar-divider { display:none; }
      .sidebar-inner > .sidebar-divider + .sidebar-divider { display:none; }
      /* sous-menus : décalés 40px, trait guide, 13px/500 */
      body.design-scope:not(.theme-health) .core-acc details > .sidebar-link:not(.compta-entree) {
        margin-inline-start:40px !important; border-inline-start:1.5px solid var(--d-line);
        padding:7px 10px 7px 14px; border-radius:8px; font-size:13px;
        font-weight:500; color:var(--d-ink2); gap:9px;
      }
      body.design-scope:not(.theme-health) .core-acc details > .sidebar-link:hover {
        background:var(--d-hover); color:var(--d-ink); }
      /* DOUBLE INDENTATION (boss 18/09, capture « Confirmation / s ») : la règle
         historique « Sub-items inside an open accordion » (plus bas) ajoute
         padding-left:38px !important PAR-DESSUS la marge de 40px de la maquette
         — 78 px perdus sur un menu de 200, il restait ~60 px pour le libellé et
         « Confirmations » cassait au milieu. Le trait de guidage est déjà la
         bordure de gauche : le padding revient à 14 px et le second trait
         (::before) disparaît. */
      body.design-scope:not(.theme-health) .core-acc details > .sidebar-link:not(.compta-entree) {
        padding-left:14px !important; padding-right:10px !important; }
      html[dir="rtl"] body.design-scope:not(.theme-health) .core-acc details > .sidebar-link:not(.compta-entree) {
        padding-left:10px !important; padding-right:14px !important; }
      body.design-scope:not(.theme-health) .core-acc details > .sidebar-link::before { display:none; }
      /* ÉMOJIS DE LA DÉMO : le glyphe bootstrap-icons est remplacé par
         l'émoji correspondant (contenu du ::before + police émoji). */
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-receipt::before,
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-receipt-cutoff::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"🧾" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-cart3::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"🛒" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-boxes::before,
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-box-seam::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"📦" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-people::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"👥" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-cash-coin::before,
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-credit-card::before,
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-bank::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"💳" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-journal-check::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"🧮" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-pie-chart::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"📊" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-fingerprint::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"⏱" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-patch-check::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"✓" !important; font-size:16px !important; font-weight:700; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-folder2-open::before,
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-file-earmark-ruled::before,
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-file-earmark-text::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"📄" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-mortarboard::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"🎓" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-shop-window::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"🍽️" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-houses::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"🏨" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-truck::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"💳" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-cash-stack::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"💰" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-shop::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"💰" !important; }
      body.design-scope:not(.theme-health) .app-sidebar :is(summary, [data-top].sidebar-link, .pin-link, .compta-entree, #sidebar-boutique .sidebar-link) > i.bi-speedometer2::before { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important; font-size:15px; font-style:normal; content:"◔" !important; font-size:17px !important; }
      /* topbar plateforme épurée : CTA prospects masqués (langue conservée) */
      body.design-scope:not(.theme-health) .navbar .nav-contact-tel,
      body.design-scope:not(.theme-health) .navbar a[href^="https://wa.me"] { display:none !important; }
      [dir="rtl"] body.design-scope:not(.theme-health) .app-sidebar,
      body.design-scope:not(.theme-health)[dir="rtl"] .app-sidebar {
        border-right:none; border-left:1px solid #e6e9f0;
      }
      .core-acc summary:hover {
        background: rgba(2,77,236,0.08);
        color: #024dec;
      }
      .core-acc details[open] summary {
        background: rgba(2,77,236,0.06);
        color: #024dec;
      }
      .core-acc summary::-webkit-details-marker { display: none; }
      .core-acc summary > i:first-child {
        font-size: 1rem;
      }
      .core-acc summary .core-acc-chev {
        margin-left: auto;
        font-size: 0.75rem;
        opacity: 0.6;
        transition: transform .15s;
      }
      .core-acc details[open] summary .core-acc-chev { transform: rotate(180deg); opacity: 1; }
      /* Sub-items inside an open accordion : indented + smaller, with a thin
         vertical guide on the left to show nesting */
      .core-acc details > .sidebar-link {
        padding-left: 38px !important;
        font-size: 0.82rem;
        position: relative;
      }
      .core-acc details > .sidebar-link::before {
        content: '';
        position: absolute;
        left: 22px;
        top: 0; bottom: 0;
        width: 2px;
        background: rgba(2,77,236,0.10);
      }
      .core-acc details > .sidebar-link.active::before {
        background: #024dec;
      }
      html[dir="rtl"] .core-acc summary .core-acc-chev {
        margin-left: 0;
        margin-right: auto;
      }
      html[dir="rtl"] .core-acc details > .sidebar-link {
        padding-left: 14px !important;
        padding-right: 38px !important;
      }
      html[dir="rtl"] .core-acc details > .sidebar-link::before {
        left: auto;
        right: 22px;
      }

/* ═══ 2. Ancien <style> du début du <body> de base.html ═══ */
/* ── Fix mobile/RTL overflow : cell text déborde sur la colonne d'à côté ──
   Quand un <td> contient un CharField texte libre (nom fournisseur, label
   engagement, destination, etc.), il peut être plus long que la largeur de
   la cell. Sans word-break, le texte sort visuellement du cadre du <td>
   et chevauche la colonne suivante — pire en RTL où l'ordre visuel s'inverse.
   Règle des tableaux (boss 07/10 « fix every table at once ») : `anywhere`
   autorisait la coupure ENTRE DEUX CHIFFRES (« 1 960, / 00 ») dès que la
   colonne rétrécissait. Le texte se coupe entre les mots ; un mot trop long
   seul se coupe encore. Le tableau trop large défile dans son cadre
   (static/js/tableaux.js), les colonnes de nombres restent sur une ligne. */
.table td, .table th {
  word-break: normal;
  overflow-wrap: break-word;
}
/* !important assumé : la règle vaut pour TOUTES les pages, y compris celles
   dont la feuille remet `white-space:normal` sur leurs cellules (annuaires
   clients / documents, mesuré par le robot le 08/10). */
.tab-num { white-space: nowrap !important; text-align: end; font-variant-numeric: tabular-nums; }
.tab-soude { white-space: nowrap !important; }

/* ── PageSpeed : skip rendering below-fold sections until scroll ─────
   Réduit drastiquement le LCP sur les longues landings (home.html
   2172 lignes / 20 sections). Le navigateur ne rend que les sections
   dans le viewport ; les autres sont skip jusqu'au scroll.
   Support : Chrome 85+ (95% mobile). Safari sans support → fallback
   render normal, sans régression.
   contain-intrinsic-size = placeholder de hauteur estimée (évite CLS). */
section,
.skip-render-below-fold {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
/* Le hero (1ère section) doit rendre immédiatement pour ne pas dégrader
   la FCP. .hero-section, .hero, et le 1er section enfant du body. */
.hero-section,
.hero,
section:first-of-type {
  content-visibility: visible;
}

/* ── App mode overrides: hide desktop chrome ONLY when inside a tool.
   Public pages (/, /tarifs/, /blog/, /logiciel-*) ALWAYS show the navbar
   so users can navigate the marketing site + log in. 2026-05-11. */
body.app-mode.in-tool .navbar,
body.app-mode footer,
body.app-mode #cookieBanner,
body.app-mode.in-tool .hero-section .hero-actions a[href*="signup"],
body.app-mode .trust-bar { display: none !important; }

/* Public marketing footer is for prospects, not logged-in operators.
   Hide it across the whole app once the user is signed in — they
   already have the sidebar / bottom-nav for navigation, and the
   « Health · Téléphone · Email · Adresse » block at the bottom of
   every working page is pure noise to them. */
body.is-authenticated footer.site-footer { display: none !important; }

/* ── Mobile list-card pattern (senior-UX rebuild 2026-05-12) ──────
   Une page de liste enveloppe sa table dans
   .card.p-0 > .table-responsive > table.table. On phones (≤767 px) the
   table becomes a stack of comfortable cards :

   ┌────────────────────────────────────────────┐
   │ ┌──┐ HALLAM Hana            [F]         ☑ │
   │ │📷│ هانا حلام                              │
   │ └──┘ 📱 0560218890                          │
   │                                            │
   │       312186605 · Vol Mars 2026            │
   │  ────────────────────────────────────────  │
   │                          [✏️] [🗑️] [💬]    │
   └────────────────────────────────────────────┘

   - Avatar pinned top-left (48×48 px target)
   - Checkbox pinned top-right
   - Identity (name + ar + phone) flows after the avatar
   - Other data fields stacked below at full width
   - Actions docked at the bottom with a dashed divider
   - One rule, every list inherits */
@media (max-width: 767.98px) {
  /* Drop the table chrome */
  .card.p-0 > .table-responsive > table.table,
  body.app-mode .table-responsive > table.table {
    border: 0 !important;
    background: transparent !important;
  }
  .card.p-0 > .table-responsive > table.table thead,
  body.app-mode .table-responsive > table.table thead {
    display: none;
  }
  .card.p-0 > .table-responsive > table.table tbody,
  body.app-mode .table-responsive > table.table tbody { display: block; }

  /* Each row becomes a card */
  .card.p-0 > .table-responsive > table.table tr,
  body.app-mode .table-responsive > table.table tr {
    display: block;
    position: relative;
    padding: 12px 12px 8px 76px;          /* 76 px left = avatar + gap */
    margin: 8px 6px 0;
    background: #fff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
    min-height: 68px;                      /* keep card tall enough for avatar */
  }
  .card.p-0 > .table-responsive > table.table tr:last-child,
  body.app-mode .table-responsive > table.table tr:last-child {
    margin-bottom: 10px;
  }

  /* Every cell flows naturally on the right of the avatar */
  .card.p-0 > .table-responsive > table.table td,
  body.app-mode .table-responsive > table.table td {
    display: block;
    border: 0 !important;
    padding: 2px 0 !important;
    font-size: .9rem;
    color: #1e293b;
    white-space: normal !important;
    line-height: 1.45;
  }
  /* Hide cells that render no visible content (dash-only, empty) */
  .card.p-0 > .table-responsive > table.table td:empty,
  body.app-mode .table-responsive > table.table td:empty { display: none; }

  /* Avatar cell : either a td with width:44px inline style or one
     containing an <img>. Pinned top-left of the card. */
  .card.p-0 > .table-responsive > table.table td[style*="width:44"],
  .card.p-0 > .table-responsive > table.table td[style*="width: 44"],
  body.app-mode .table-responsive > table.table td[style*="width:44"] {
    position: absolute !important;
    top: 12px;
    left: 14px;
    width: 48px !important;
    height: 48px;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* The avatar IMG / fallback initial circle scales up nicely. */
  .card.p-0 > .table-responsive > table.table td[style*="width:44"] img,
  .card.p-0 > .table-responsive > table.table td[style*="width:44"] > div {
    width: 48px !important;
    height: 48px !important;
    font-size: .92rem;
  }

  /* Checkbox cell — first <td>, pinned top-right */
  .card.p-0 > .table-responsive > table.table td:first-child,
  body.app-mode .table-responsive > table.table td:first-child {
    position: absolute !important;
    top: 14px;
    right: 12px;
    padding: 0 !important;
    margin: 0 !important;
    width: auto;
  }

  /* Actions row (last cell : edit / delete / WhatsApp / etc.) */
  .card.p-0 > .table-responsive > table.table td:last-child,
  body.app-mode .table-responsive > table.table td:last-child {
    display: flex !important;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 10px !important;
    margin-top: 8px;
    border-top: 1px dashed #f1f5f9 !important;
  }
  .card.p-0 > .table-responsive > table.table td:last-child .btn-sm,
  body.app-mode .table-responsive > table.table td:last-child .btn-sm {
    padding: 6px 10px;
    font-size: .85rem;
  }

  /* RTL : swap avatar / checkbox sides */
  html[dir="rtl"] .card.p-0 > .table-responsive > table.table tr,
  html[dir="rtl"] body.app-mode .table-responsive > table.table tr {
    padding: 12px 76px 8px 12px;
  }
  html[dir="rtl"] .card.p-0 > .table-responsive > table.table td[style*="width:44"],
  html[dir="rtl"] body.app-mode .table-responsive > table.table td[style*="width:44"] {
    left: auto; right: 14px;
  }
  html[dir="rtl"] .card.p-0 > .table-responsive > table.table td:first-child,
  html[dir="rtl"] body.app-mode .table-responsive > table.table td:first-child {
    right: auto; left: 12px;
  }
}

body.app-mode { padding-top: env(safe-area-inset-top, 0px) !important;
                padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
                /* CSS hook : any fixed-bottom UI element (bulk-action bar,
                   floating toolbar, toast, etc.) should add
                   `bottom: calc(<wanted px> + var(--app-bottom-clearance))`
                   so the bottom nav never hides it. Default value covers
                   the 72-px nav + safe-area inset on phones with a home
                   indicator (iPhone, etc.). 0px outside app-mode so the
                   var stays addressable from any page. */
                --app-bottom-clearance: calc(72px + env(safe-area-inset-bottom, 0px)); }
:root { --app-bottom-clearance: 0px; }
body.app-mode .container { padding-top: 12px; }
/* Forms with sticky/anchored footer buttons (package_form, hotel_form…)
   often have their submit row at the very bottom of the page. The
   72px-tall bottom nav was clipping it — give every <form> some room
   so the last field/button is reachable above the nav. */
body.app-mode form { padding-bottom: 24px; }
body.app-mode .form-actions,
body.app-mode .sticky-form-actions { margin-bottom: 24px; }

/* Dark top bar in app-mode tool pages — replaces the (hidden) public
   navbar with a thin native-app-style header. Reserves safe-area-inset
   so it doesn't overlap the punch-hole camera / status bar on Samsung Z,
   iPhone notch, etc. Contains the sidebar hamburger + a context pill
   showing which tool we're in. Desktop hides it (the static sidebar
   and full navbar do the job). */
/* Bandeau DÉMO (boss 10/09) : collant sous la barre du haut, jamais rouge d'alerte — ce n'est pas une panne. */
.demo-band { position: sticky; top: 0; z-index: 1030; background: linear-gradient(90deg, #4f46e5, #6366f1); color: #fff; font-size: .84rem; }
.demo-band-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 7px; padding-bottom: 7px; }
.demo-band-tag { font-weight: 900; letter-spacing: .12em; font-size: .72rem; background: #fff; color: #4f46e5; border-radius: 6px; padding: 2px 8px; }
.demo-band-txt { flex: 1 1 auto; min-width: 0; }
.demo-band-link { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.demo-band-link:hover { color: #e0e7ff; }
/* 10/09 (capture boss, boucle locale) : la barre latérale fixe (240 px) recouvrait le début
   du bandeau (« …tion — jusqu'au ») : sur écran large, le bandeau commence après elle. */
@media (min-width: 992px) {
  .demo-band.has-sidebar .demo-band-inner { margin-inline-start: 240px; width: auto; }  /* px-lg-4 impose son padding en !important : on décale par la marge */
}

.app-topbar { display: none; }
body.app-mode.in-tool .app-topbar {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1050;
    padding-top: env(safe-area-inset-top, 0px);
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    color: #f1f5f9;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.app-topbar-inner {
    display: flex; align-items: center; gap: 10px;
    width: 100%; height: 52px; padding: 0 12px;
}
.app-topbar-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: #f1f5f9;
    font-size: 1.35rem; border-radius: 10px;
    -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.app-topbar-btn:active { background: rgba(255,255,255,.10); }
.app-topbar-brand {
    flex: 1; display: flex; align-items: center; gap: 8px;
    font-size: .95rem; font-weight: 700; color: #f1f5f9;
    text-decoration: none; min-width: 0;
}
.app-topbar-brand img { height: 22px; width: auto; filter: brightness(0) invert(1); }

/* ── Enseigne « machine à écrire » (boss 10/09, proposition C validée) ── */
.brand-roller{display:inline-block;height:1.35em;line-height:1.35em;vertical-align:middle;max-width:min(60vw,360px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-txt{font-weight:800;letter-spacing:.01em;}
.brand-nom{background:linear-gradient(100deg,var(--primary,#024dec) 0%,#a855f7 45%,var(--primary,#024dec) 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brandShine 4s linear infinite;}
.brand-vue{color:var(--primary,#024dec);}
.brand-type.en-frappe::after{content:"";display:inline-block;width:2px;height:1em;background:var(--primary,#024dec);margin-inline-start:2px;vertical-align:-2px;animation:brandBlink 1s steps(1) infinite;}
.app-topbar-pill .brand-nom,.app-topbar-pill .brand-vue{color:#fff;background:none;-webkit-text-fill-color:#fff;animation:none;}
.app-topbar-pill .brand-type.en-frappe::after{background:#fff;}
@keyframes brandShine{0%{background-position:0% 50%;}100%{background-position:220% 50%;}}
@keyframes brandBlink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.brand-nom{animation:none}.brand-type.en-frappe::after{animation:none}}
.app-topbar-pill {
    font-size: .65rem; font-weight: 700; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 10px; color: #fff;
    white-space: nowrap;
}
.app-topbar-pill.health   { background: linear-gradient(135deg,#0284c7,#0ea5e9); }
.app-topbar-pill.core     { background: linear-gradient(135deg,#4f46e5,#7c3aed); }
@media (min-width: 992px) {
    body.app-mode.in-tool .app-topbar { display: none; }
}
/* Push page content below the dark top bar */
body.app-mode.in-tool { padding-top: calc(env(safe-area-inset-top, 0px) + 52px) !important; }
@media (min-width: 992px) { body.app-mode.in-tool { padding-top: env(safe-area-inset-top, 0px) !important; } }

/* ── Bottom navigation bar ── */
body.app-mode .app-bottom-nav { display: flex !important; }

.app-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: rgba(255,255,255,.97);
    border-top: 1px solid #e2e8f0;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    justify-content: space-around; align-items: center;
}
.app-nav-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: #64748b; text-decoration: none;
    font-size: .65rem; font-weight: 600;
    padding: 4px 12px; border-radius: 10px;
    min-width: 56px; -webkit-tap-highlight-color: transparent;
    transition: color .15s;
}
.app-nav-btn i { font-size: 1.35rem; }
.app-nav-btn.active, .app-nav-btn:active { color: #024dec; }

/* Touch-friendly cards and buttons in app mode */
body.app-mode .btn { min-height: 44px; }
body.app-mode .form-control, body.app-mode .form-select { min-height: 48px; font-size: 1rem; }
body.app-mode .table td, body.app-mode .table th { padding: .75rem .5rem; }

/* ──────────────────────────────────────────────────────────────────
   Billing forms (invoice / proforma / devis / BC) — mobile layout.
   Each .invoice-line is a row of col-1/col-2 cells on desktop; on
   phones AND tablets that's unreadable (esp. the col-1 "Qté" cell,
   which shrinks to ~53px — impossible to tap), so we stack the cells
   as a labelled card up to 991px. Only true pointer devices (≥992px)
   keep the dense grid. Users reported the quantity field being too
   small to click on tablets/iPad — this is the fix.
────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .lines-header-row { display: none !important; }
  .invoice-line {
    display: block !important;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: #ffffff;
  }
  .invoice-line > .col,
  .invoice-line > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 10px;
  }
  .invoice-line > .col:last-child,
  .invoice-line > [class*="col-"]:last-child { margin-bottom: 0; }
  .invoice-line [class*="col-"][data-label]::before,
  .invoice-line .col[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 4px;
  }
  /* Fallback for templates that haven't been tagged with data-label —
     use :has() on the input/select name attribute. */
  .invoice-line > div:not([data-label]):has(input[name="description[]"])::before { content: 'Désignation'; }
  .invoice-line > div:not([data-label]):has(input[name="qty[]"])::before         { content: 'Qté'; }
  .invoice-line > div:not([data-label]):has(input[name="unit_price[]"])::before  { content: 'Prix HT'; }
  .invoice-line > div:not([data-label]):has(input[name="discount[]"])::before    { content: 'Remise %'; }
  .invoice-line > div:not([data-label]):has(select[name="tax_rate[]"])::before   { content: 'TVA %'; }
  .invoice-line > div:not([data-label]):has(input[name="description[]"])::before,
  .invoice-line > div:not([data-label]):has(input[name="qty[]"])::before,
  .invoice-line > div:not([data-label]):has(input[name="unit_price[]"])::before,
  .invoice-line > div:not([data-label]):has(input[name="discount[]"])::before,
  .invoice-line > div:not([data-label]):has(select[name="tax_rate[]"])::before {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .invoice-line .form-control,
  .invoice-line .form-select {
    text-align: left !important;
    /* Comfortable tap target on touch devices (incl. iPad/tablet 768-991px,
       which previously fell into the dense desktop grid). 16px also stops
       iOS Safari from zooming on focus. Beats the inline .78rem set on the
       narrow line inputs (qty/discount) in the templates. */
    min-height: 44px;
    font-size: 16px !important;
  }
  .invoice-line .line-remove-cell { text-align: right !important; }
  .invoice-line .line-remove-cell button { width: 100%; min-height: 42px; }
}

/* ──────────────────────────────────────────────────────────────────
   Dashboard — tableau « Demandes d'absence » en cartes empilées sur
   mobile (sinon les dates et les boutons Approuver/Refuser se coupent
   lettre par lettre — signalé sur le tableau de bord).
────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .leave-table thead { display: none; }
  .leave-table, .leave-table tbody, .leave-table tr, .leave-table td { display: block; width: 100%; }
  .leave-table tr {
    border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px;
    margin-bottom: 12px; background: #fff;
  }
  .leave-table td { border: none !important; padding: 4px 0 !important; }
  .leave-table td[data-label]::before {
    content: attr(data-label) " : "; font-weight: 600; color: #94a3b8;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  }
  .leave-table td .d-flex { margin-top: 8px; }
  .leave-table td .btn { flex: 1; white-space: nowrap; }
}

/* ──────────────────────────────────────────────────────────────────
   Global mobile-friendliness layer (iPhone & Android).
   - Inputs use 16px so iOS Safari doesn't zoom on focus
   - Touch targets meet HIG: 44px min height for buttons + form fields
   - Flex rows of fixed-width fields collapse to 50%/100% on phones
   - Tables scroll instead of overflowing
   - Sticky bottom nav respects the iPhone home-indicator safe area
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* iOS zoom prevention — must be ≥ 16px to avoid the auto-zoom on focus */
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="date"], input[type="datetime-local"], input[type="search"],
  input[type="password"], input[type="url"], input[type="time"],
  textarea, select,
  .form-control, .form-select {
    font-size: 16px !important;
  }

  /* Touch targets — Apple HIG 44pt, Material 48dp */
  .btn { min-height: 44px; padding-left: 16px; padding-right: 16px; }
  .btn-sm { min-height: 38px; padding-left: 12px; padding-right: 12px; }
  .form-control, .form-select { min-height: 44px; }
  .form-control-sm, .form-select-sm { min-height: 38px; }

  /* Flex form rows: any inline row built with `d-flex gap-2 flex-wrap`
     and inline `flex:0 0 Npx` siblings — make those siblings take a
     reasonable share of width on phones instead of staying tiny. */
  .d-flex.flex-wrap > [style*="flex:0 0"],
  .d-flex.flex-wrap > [style*="flex: 0 0"] {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
  }
  .d-flex.flex-wrap > [style*="flex:1"],
  .d-flex.flex-wrap > [style*="flex: 1"],
  .d-flex.flex-wrap > [style*="flex:2"],
  .d-flex.flex-wrap > [style*="flex: 2"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Buttons in narrow flex rows: allow them to share a line if they
     fit, otherwise wrap cleanly. min-width keeps them tappable. */
  .d-flex.flex-wrap > .btn,
  .d-flex.flex-wrap > button.btn { min-width: 120px; }

  /* Tables: never overflow horizontally without a scroll container */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  table { max-width: 100%; }

  /* Slightly tighter headings on tiny screens */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.15rem; }

  /* Long file paths / monospace tokens shouldn't blow the layout */
  .table td, .table th { word-break: normal; }   /* règle des tableaux 07/10 : jamais dans un nombre */

  /* Sidebar links touch-friendly */
  .sidebar-link { padding: 12px 14px !important; min-height: 44px; }

  /* Container padding on small screens — already fine via Bootstrap,
     but enforce so inline px-3 px-lg-4 doesn't get double-applied */
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }

  /* Status pills + heading area shouldn't overlap on small screens */
  .badge, .pill { white-space: normal; }

  /* Navbar dropdown menus on phones : pin to the viewport with
     `position: fixed`, NOT absolute-relative-to-the-toggle. Bootstrap +
     Popper position the menu via `transform`, which on a narrow phone
     pushes the menu off-screen when the toggle is near the right edge.
     Hard-fixing position + zeroing transform reliably keeps it inside the
     screen in both FR (LTR) and AR (RTL). User-flagged 2x (2026-05-12).
     The `.show` selector limits the rule to the *open* menu so closed
     menus don't fight Popper unnecessarily. */
  .navbar .dropdown-menu.show {
    position: fixed !important;
    top: 60px !important;
    right: 8px !important;
    left: auto !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 220px !important;
    width: max-content !important;
    transform: none !important;
    inset: auto 8px auto auto !important;
  }
  [dir="rtl"] .navbar .dropdown-menu.show {
    right: auto !important;
    left: 8px !important;
    inset: auto auto auto 8px !important;
  }
  .dropdown-menu .dropdown-item {
    white-space: normal !important;
    word-break: break-word;
  }
}

/* iPhone home-indicator safe area for the floating bottom nav */
.app-bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}

/* Avoid horizontal page scroll caused by accidental overflow children */
html, body { overflow-x: hidden; }

/* ────────────────────────────────────────────────────────────────────
   Free plan — locked sidebar links: visible but greyed out, lock icon
   on the right, click → /tarifs/ (handled in JS at the bottom).
   ──────────────────────────────────────────────────────────────── */
body.theme-free .sidebar-link.lockable-free {
  position: relative;
  opacity: .55;
  filter: saturate(.4);
}
body.theme-free .sidebar-link.lockable-free:hover {
  opacity: .85;
  background: rgba(220, 38, 38, 0.06);
}
body.theme-free .sidebar-link.lockable-free::after {
  content: "\F47A";  /* bi-lock-fill */
  font-family: "bootstrap-icons";
  margin-left: auto;
  font-size: .8rem;
  color: #94a3b8;
}
body.theme-free .sidebar-link.lockable-free .sidebar-info { display: none; }
body.theme-free .sidebar-link.lockable-free i:first-child { color: #94a3b8 !important; }
/* Module réellement activé (ex. gratuit ayant choisi son métier) : pas de verrou. */
body.theme-free .mod-unlocked .lockable-free { opacity: 1; filter: none; }
body.theme-free .mod-unlocked .lockable-free::after { content: none; }
body.theme-free .mod-unlocked .lockable-free i:first-child { color: unset !important; }
body.theme-free .mod-unlocked .lockable-free .sidebar-info { display: inline; }

/* ────────────────────────────────────────────────────────────────────
   Locked-module upsell — modules the company does NOT have are shown
   greyed with a lock instead of being hidden, so the user discovers what
   exists and can upgrade. Works in EVERY plan/tool (not just theme-free).
   The link points straight to /tarifs/ — no JS interception needed.
   ──────────────────────────────────────────────────────────────────── */
.sidebar-link.locked-upsell { position: relative; opacity: .6; }
.sidebar-link.locked-upsell:hover { opacity: .92; background: rgba(2,77,236,0.06); }
.sidebar-link.locked-upsell::after {
  content: "\F47A";  /* bi-lock-fill */
  font-family: "bootstrap-icons";
  margin-left: auto;
  font-size: .8rem;
  color: #94a3b8;
}
.sidebar-link.locked-upsell i:first-child { color: #94a3b8 !important; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║   ALMAWARID HEALTH MODE THEME                                    ║
   ╚══════════════════════════════════════════════════════════════════╝
   Health identity — applied to every page when request.current_tool == 'health'.
   Color signature: medical sky-blue (#0284c7 → #0ea5e9), avoiding green
   (associated with vaccines/infection in some cultures) and red (alarm).
   Sky-blue = clinical, calm, trust — Doctolib, Apple Health, etc. */
body.theme-health {
  background:
    linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 240px, #ffffff 600px) !important;
}
body.theme-health::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 50%, #06b6d4 100%);
  z-index: 1100;
}
.health-page-mark {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 150px;
  height: 90px;
  color: #0284c7;
  opacity: .18;
  pointer-events: none;
  z-index: 5;
  transition: opacity .25s ease;
}
.health-page-mark svg { width: 100%; height: 100%; display: block; }
@media (max-width: 575px) {
  .health-page-mark { width: 90px; height: 54px; right: 10px; bottom: 80px; opacity: .15; }
}
@media print { .health-page-mark, body.theme-health::before { display: none !important; } }

body.theme-health .sidebar-inner { min-height: calc(100vh - 90px); }
.health-sidebar-decor {
  margin-top: auto;
  padding: 28px 14px 12px;
  text-align: center;
  color: #0284c7;
  pointer-events: none;
  user-select: none;
  opacity: .24;
  transition: opacity .25s ease;
}
.health-sidebar-decor:hover { opacity: .40; }
.health-sidebar-decor svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.health-sidebar-tagline {
  margin-top: 8px;
  font-family: 'Amiri', serif;
  font-size: .72rem;
  color: #475569;
  font-style: italic;
  letter-spacing: .02em;
  opacity: .9;
}
@media print { .health-sidebar-decor { display: none !important; } }