/* ============================================================
   Cadetel — Design system "Aurora" 2026
   Canvas clair aurora · sidebar flottante en verre · cartes bento
   · typo display Space Grotesk · accents dégradés violet→cyan.
   ============================================================ */
:root {
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, sans-serif;

    --v1: #7c5cff;   /* violet */
    --v2: #5b8def;   /* bleu   */
    --v3: #22d3ee;   /* cyan   */
    --pop: #b8f24a;  /* lime accent */
    --grad: linear-gradient(135deg, #7c5cff 0%, #5b8def 52%, #22d3ee 100%);
    --grad-soft: linear-gradient(135deg, rgba(124,92,255,.14), rgba(34,211,238,.12));

    --ink: #14151f;
    --ink-soft: #4c4f63;
    --ink-faint: #8b8fa6;

    --canvas: #f3f3fb;
    --surface: #ffffff;
    --line: #ecebf5;

    --sidebar-1: #1b1c31;
    --sidebar-2: #131322;
    --sidebar-fg: #b6b9d6;

    --r-xl: 26px; --r-lg: 20px; --r-md: 14px; --r-sm: 11px;
    --sh-sm: 0 2px 6px rgba(23,20,54,.05);
    --sh-md: 0 10px 30px rgba(23,20,54,.08), 0 2px 8px rgba(23,20,54,.05);
    --sh-lg: 0 30px 70px rgba(23,20,54,.20);
    --sh-glow: 0 12px 30px rgba(124,92,255,.35);
    --ring: 0 0 0 4px rgba(124,92,255,.16);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--canvas);
    color: var(--ink-soft);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.01em;
    position: relative;
}

/* ---------- Fond aurora décoratif ---------- */
.aurora-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
    radial-gradient(1100px 700px at 8% -5%, #ede9ff 0%, transparent 55%),
    radial-gradient(900px 600px at 100% 0%, #e0f5fb 0%, transparent 50%),
    linear-gradient(180deg, #f6f5fe 0%, #f1f2fb 100%); }
.aurora-bg span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.aurora-bg span:nth-child(1) { width: 480px; height: 480px; left: -80px; top: 10%; background: #c7b8ff; }
.aurora-bg span:nth-child(2) { width: 420px; height: 420px; right: -60px; top: 40%; background: #a9e7f5; opacity: .4; }
.aurora-bg span:nth-child(3) { width: 360px; height: 360px; left: 40%; bottom: -120px; background: #d9f7a6; opacity: .28; }

h1, h2, h3, h4, .fw-bold, .topbar-title, .page-head h1, .brand-name, .sc-value, .modal-title, .ci-title, .stat-card .sc-value {
    font-family: var(--font-display); letter-spacing: -.02em;
}
a { color: var(--v2); text-decoration: none; }
a:hover { color: var(--v1); }
.text-primary { color: var(--v1) !important; }

/* ---------- Boutons ---------- */
.btn { border-radius: 999px; font-weight: 600; padding: .52rem 1.05rem; font-family: var(--font-body); transition: transform .12s, box-shadow .2s, background .2s, filter .2s; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .34rem .8rem; font-size: .82rem; }
.btn-primary, .bg-primary { background: var(--grad) !important; border: none !important; box-shadow: var(--sh-glow); color: #fff; }
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 16px 36px rgba(124,92,255,.45); }
.btn-outline-primary { color: var(--v1); border: 1.5px solid #ded8ff; background: #fff; }
.btn-outline-primary:hover { background: var(--grad-soft); border-color: #cfc4ff; color: var(--v1); }
.btn-outline-secondary { border: 1.5px solid var(--line); color: var(--ink-soft); background: rgba(255,255,255,.7); }
.btn-outline-secondary:hover { background: #fff; color: var(--ink); border-color: #dcdbea; }
.btn-outline-danger { border-width: 1.5px; }
.btn-outline-danger:hover { background: #fff1f2; }
.btn-light { background: rgba(255,255,255,.85); border: 1px solid var(--line); }
.dropdown-menu { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-md); padding: .4rem; }
.dropdown-item { border-radius: 9px; padding: .5rem .7rem; font-weight: 500; }
.dropdown-item:hover { background: var(--grad-soft); color: var(--v1); }

/* ---------- Champs ---------- */
/* `background-color` et non `background` : la forme courte écrasait l'image de
   fond de Bootstrap, et tout <select> natif perdait son chevron déroulant. */
.form-control, .form-select { border-radius: 12px; border: 1.5px solid #e6e5f2; padding: .58rem .85rem; background-color: #fbfbff; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.form-control:focus, .form-select:focus { border-color: var(--v1); box-shadow: var(--ring); background-color: #fff; }
.form-control::placeholder { color: #adb0c6; }
.form-label { font-weight: 600; font-size: .8rem; color: var(--ink-soft); margin-bottom: .3rem; }
.form-check-input:checked { background-color: var(--v1); border-color: var(--v1); }
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--v1); }

/* ============================================================
   Coquille : sidebar flottante en verre
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 254px; flex: 0 0 254px;
    margin: 16px 0 16px 16px; height: calc(100vh - 32px); position: sticky; top: 16px;
    background: linear-gradient(165deg, var(--sidebar-1), var(--sidebar-2));
    color: var(--sidebar-fg);
    border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 24px 50px rgba(20,18,50,.28);
    display: flex; flex-direction: column; overflow: hidden;
}
.sidebar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 200px at 20% 0%, rgba(124,92,255,.30), transparent 60%); pointer-events: none; }
.sidebar-brand { display: flex; align-items: center; gap: .7rem; padding: 1.35rem 1.4rem 1rem; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.25rem; position: relative; }
.brand-logo { width: 40px; height: 40px; border-radius: 13px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; box-shadow: 0 8px 20px rgba(124,92,255,.5); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .4rem .8rem 1rem; position: relative; }
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 5px; }
.sidebar-nav .nav-link { display: flex; align-items: center; gap: .8rem; position: relative; color: var(--sidebar-fg); border-radius: 13px; padding: .62rem .85rem; margin-bottom: 3px; font-size: .91rem; font-weight: 500; transition: background .16s, color .16s, transform .12s; }
.sidebar-nav .nav-link i { font-size: 1.1rem; width: 22px; text-align: center; opacity: .75; transition: opacity .16s, transform .16s; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(2px); }
.sidebar-nav .nav-link:hover i { opacity: 1; }
.sidebar-nav .nav-link.active { background: linear-gradient(120deg, rgba(124,92,255,.9), rgba(91,141,239,.85)); color: #fff; box-shadow: 0 8px 20px rgba(124,92,255,.4); }
.sidebar-nav .nav-link.active i { opacity: 1; color: #fff; transform: scale(1.05); }
.nav-section { text-transform: uppercase; font-size: .66rem; letter-spacing: .14em; color: #6a6e94; padding: 1.1rem .9rem .45rem; font-weight: 700; }
.sidebar-footer { padding: .9rem 1rem 1.2rem; border-top: 1px solid rgba(255,255,255,.07); position: relative; }
.user-chip { display: flex; align-items: center; gap: .65rem; }
.user-avatar { width: 40px; height: 40px; border-radius: 13px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); }
.user-meta { display: flex; flex-direction: column; line-height: 1.15; }
.user-meta strong { color: #fff; font-size: .92rem; font-family: var(--font-display); }
.user-meta small { color: #7f83a6; font-size: .74rem; }
.sidebar-footer .btn-outline-light { border: 1px solid rgba(255,255,255,.16); color: #d3d6ee; border-radius: 12px; }
.sidebar-footer .btn-outline-light:hover { background: rgba(255,255,255,.09); color: #fff; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { background: rgba(247,246,254,.75); backdrop-filter: saturate(1.8) blur(14px); border-bottom: 1px solid rgba(236,235,245,.9); padding: 1rem 2rem; position: sticky; top: 0; z-index: 20; }
.topbar-title { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.app-content { padding: 1.9rem 2rem 3rem; max-width: 1340px; width: 100%; animation: rise .4s cubic-bezier(.2,.7,.3,1) both; }
/* Écrans larges : une liste de suivi (colonnes Règlement / Relance) et une fiche
   document (bandeau latéral) doivent occuper l'écran, sinon des colonnes
   sortent du cadre et un vide s'installe à droite du bandeau. Le plafond de
   lecture confortable reste en vigueur partout ailleurs.
   `.app-content--large` est LA classe à poser sur le gabarit concerné (via le
   bloc Twig `content_class`) : c'est le gabarit qui sait de quelle largeur il a
   besoin. Le sélecteur `:has(.table-factures)` reste en filet pour toute liste
   de suivi qui oublierait la classe ; on ne déduit plus rien des classes de
   colonnes Bootstrap, qui bougent au gré des réglages de la fiche. */
.app-content--large,
.app-content:has(.table-factures) { max-width: min(1900px, 100%); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Fiche document : tableau des lignes / bandeau latéral ----------
   Le bandeau était exprimé en douzièmes : à 1600 px son quart valait 400 px pour
   un besoin réel d'environ 300 px, et la désignation tombait à 337 px — moins
   que sur un portable de 1366 px, où les colonnes s'empilent et rendent au
   tableau 100 % de la largeur. D'où une fiche qui rétrécissait en s'élargissant.
   Le bandeau est donc borné en pixels et le tableau prend tout le reste.

   Deux bornes chiffrées commandent le reste, et elles sont serrées : les six
   colonnes autres que la désignation ne se compriment plus sous ~603 px, si bien
   qu'un pixel d'écran gagné est un pixel de désignation gagné.
   — Le bandeau ne peut pas dépasser 280 px : passer de 1600 à 1920 px ne rapporte
     que 320 px de contenu, qu'un bandeau plus large mangerait — et la fiche
     serait de nouveau plus étroite sur le grand écran que sur le moyen.
   — Les colonnes ne peuvent pas se mettre côte à côte avant 1700 px : en dessous,
     ce que coûte le bandeau ramènerait la désignation sous les 426 px qu'elle
     mesure sur un portable de 1366 px, où les colonnes s'empilent.

   `min-width: 0` n'est pas décoratif : sans lui, un tableau refuse de descendre
   sous sa largeur naturelle dans un conteneur flex et déborde de la page. */
.doc-fiche { display: flex; flex-wrap: wrap; gap: 0 1.5rem; align-items: flex-start; }
.doc-fiche > * { flex: 1 1 100%; min-width: 0; }
/* Côte à côte dès 1400 px, et non 1700 : sur un 1600 px — la taille d'écran de
   référence — reléguer le bandeau sous un tableau de 19 lignes obligerait à
   défiler pour relire le client, la date ou les conditions. Le tableau y perd un
   peu de largeur, mais on ne perd plus l'information de vue. */
@media (min-width: 1400px) {
    .doc-fiche__principal { flex: 1 1 0; }
    .doc-fiche__bandeau { flex: 0 0 280px; }
}
/* Empilé sous le tableau, le bandeau étirerait ses cartes sur toute la largeur :
   un libellé de 120 px suivi d'un blanc de 1 100 px. Il se replie donc en bande
   de cartes de 360 px au moins — de quoi tenir un nom de client sur une ligne
   en face d'un libellé qui peut aller jusqu'à 185 px (.detail-grid).
   Flex et non grille : les cartes n'ont pas la même hauteur ni le même nombre,
   et une grille laisserait un blanc là où la rangée n'est pas remplie. Ici la
   dernière carte s'étale sur ce qui reste. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .doc-fiche__bandeau { display: flex; flex-wrap: wrap; gap: 0 1.5rem; align-items: flex-start; }
    .doc-fiche__bandeau > .card { flex: 1 1 360px; }
}

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.85rem; font-weight: 700; margin: 0; color: var(--ink); }

/* ---------- Dashboard hero ---------- */
.dash-hero { position: relative; border-radius: var(--r-xl); padding: 2rem 2.2rem; margin-bottom: 1.8rem; color: #fff; overflow: hidden; background: linear-gradient(120deg, #6d4bff 0%, #5b8def 55%, #22d3ee 120%); box-shadow: 0 24px 50px rgba(90,70,220,.32); }
.dash-hero::before { content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); }
.dash-hero::after { content: ""; position: absolute; right: 8%; bottom: -140px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(184,242,74,.35), transparent 60%); }
.dash-hero-content { position: relative; }

/* ============================================================
   Listes (rows distinctives, pas des lignes plates Glide)
   ============================================================ */
.collection-list { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; border: 1px solid var(--line); }
.collection-item { display: flex; align-items: center; gap: .95rem; position: relative; padding: .8rem 1.15rem; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background .16s; cursor: pointer; }
.collection-item::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; border-radius: 3px; background: var(--grad); opacity: 0; transition: opacity .16s; }
.collection-item:last-child { border-bottom: 0; }
.collection-item:hover { background: linear-gradient(90deg, rgba(124,92,255,.05), transparent 55%); }
.collection-item:hover::before { opacity: 1; }
.collection-item:hover .ci-title { color: var(--v1); }

.ci-chip { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--v1); background: var(--grad-soft); border: 1px solid rgba(124,92,255,.14); }
.ci-body { flex: 1 1 auto; min-width: 0; }
.ci-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); transition: color .16s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-sub { color: var(--ink-faint); font-size: .86rem; margin-top: .05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-side { display: flex; flex-direction: column; align-items: flex-end; gap: .28rem; flex: 0 0 auto; text-align: right; }
.ci-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--v1); background: var(--grad-soft); padding: .16rem .55rem; border-radius: 999px; white-space: nowrap; }
.ci-right { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: .95rem; white-space: nowrap; }
.ci-arrow { color: #c3c6da; font-size: .8rem; flex: 0 0 auto; transition: transform .16s, color .16s; }
.collection-item:hover .ci-arrow { color: var(--v1); transform: translateX(3px); }

/* ---------- Cartes bento & stat ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); gap: 1.15rem; margin-bottom: 1.8rem; }
.stat-card { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 1.3rem 1.4rem; box-shadow: var(--sh-sm); border: 1px solid var(--line); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.stat-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--grad-soft); }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.stat-card .sc-label { color: var(--ink-faint); font-size: .82rem; font-weight: 600; position: relative; }
.stat-card .sc-value { font-size: 2.05rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; position: relative; }
.stat-card .sc-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.15rem; color: #fff; background: var(--grad); box-shadow: var(--sh-glow); position: relative; }

/* ---------- Page Administration ---------- */
.admin-section-title { font-family: var(--font-display); font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .09em; font-size: .76rem; margin: .4rem 0 .85rem; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.admin-tile { display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; box-shadow: var(--sh-sm); text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; }
.admin-tile::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--grad-soft); opacity: .7; transition: opacity .18s; }
.admin-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: #dcd7fb; }
.admin-tile:hover::after { opacity: 1; }
.admin-chip { width: 48px; height: 48px; border-radius: 14px; background: var(--grad-soft); color: var(--v1); display: grid; place-items: center; font-size: 1.3rem; flex: 0 0 auto; border: 1px solid rgba(124,92,255,.14); position: relative; z-index: 1; transition: background .18s, color .18s, box-shadow .18s; }
.admin-tile:hover .admin-chip { background: var(--grad); color: #fff; box-shadow: var(--sh-glow); border-color: transparent; }
.admin-tile-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.admin-tile-title { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.admin-tile-sub { color: var(--ink-faint); font-size: .83rem; }
.admin-arrow { color: #c3c6da; flex: 0 0 auto; position: relative; z-index: 1; transition: transform .18s, color .18s; }
.admin-tile:hover .admin-arrow { color: var(--v1); transform: translateX(4px); }

.card { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); background: var(--surface); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; color: var(--ink); padding: 1rem 1.25rem; border-radius: var(--r-lg) var(--r-lg) 0 0 !important; }
.card-body { padding: 1.25rem; }
.list-group-item { border-color: var(--line); padding: .85rem 1.25rem; background: transparent; }
.list-group-item-action:hover { background: rgba(124,92,255,.05); }

/* ---------- En-tête profil (fiche utilisateur…) ---------- */
.profile-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: .5rem; }
.profile-avatar { width: 66px; height: 66px; border-radius: 20px; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; box-shadow: var(--sh-glow); flex: 0 0 auto; }
.profile-meta h2 { font-family: var(--font-display); font-weight: 700; margin: 0 0 .1rem; font-size: 1.4rem; color: var(--ink); }
.profile-meta code, .detail-grid code { background: #f1f0fb; color: var(--v1); padding: .12rem .45rem; border-radius: 7px; font-size: .85rem; }

/* Deux garde-fous contre le débordement du bandeau latéral :
   - `minmax(0, 1fr)` sur la colonne de valeur : sans lui, la largeur minimale du
     contenu (un SIRET, un n° de TVA, un nom de client sans espace) pousse la
     grille hors de la carte au lieu de la faire revenir à la ligne ;
   - `fit-content(185px)` sur la colonne d'intitulés : elle plafonne à 185 px mais
     ne réserve jamais plus que ce que les intitulés demandent, sinon un bandeau
     de 320 px ne laissait que 50 px à la valeur (SIRET sur trois lignes). */
.detail-grid { display: grid; grid-template-columns: fit-content(185px) minmax(0, 1fr); gap: .6rem 1rem; }
.detail-grid dt { color: var(--ink-faint); font-weight: 600; font-size: .84rem; min-width: 0; overflow-wrap: anywhere; }
.detail-grid dd { margin: 0; font-weight: 500; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

.table { --bs-table-border-color: var(--line); }
.table > thead th { color: var(--ink-faint); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.table > :not(caption) > * > * { padding: .8rem .85rem; }
.table-light { --bs-table-bg: #f7f7fd; }

/* ---------- Badges ---------- */
.badge { font-weight: 600; padding: .42em .75em; border-radius: 999px; font-size: .73rem; letter-spacing: .01em; }
.badge.bg-success { background: #dcfce7 !important; color: #15803d !important; }
.badge.bg-danger { background: #ffe4e6 !important; color: #be123c !important; }
.badge.bg-warning { background: #fef3c7 !important; color: #b45309 !important; }
.badge.bg-secondary { background: #eeedf7 !important; color: #55586b !important; }
.badge.bg-info { background: #dbeafe !important; color: #1d4ed8 !important; }
.badge.bg-primary { background: var(--grad-soft) !important; color: var(--v1) !important; }

/* ---------- Filtres pills ---------- */
.btn.btn-outline-secondary.btn-sm, .btn.btn-primary.btn-sm { border-radius: 999px; }

/* ============================================================
   Modales
   ============================================================ */
.modal-content { border: none; border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 1.1rem 1.5rem; background: var(--grad-soft); }
.modal-header .modal-actions { flex: 0 0 auto; }
.modal-header .btn-close { margin: 0; flex: 0 0 auto; }
.modal-title { font-weight: 700; font-family: var(--font-display); flex: 1 1 auto; min-width: 0; }
.modal-body { padding: 1.5rem 1.6rem; }
.modal .card { box-shadow: none; }
.modal .page-head { display: none; }
.modal-backdrop.show { opacity: .4; background: #1a1830; }
.modal.fade .modal-dialog { transition: transform .25s cubic-bezier(.34,1.3,.4,1), opacity .25s; transform: translateY(18px) scale(.97); }
.modal.show .modal-dialog { transform: none; }
.collection-entry, .ligne-row { background: #fafaff; border-color: var(--line) !important; border-radius: var(--r-md) !important; }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 1090; display: flex; flex-direction: column; gap: .6rem; }
.app-toast { display: flex; align-items: start; gap: .7rem; min-width: 310px; max-width: 410px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-radius: 16px; padding: .9rem 1.05rem; box-shadow: var(--sh-lg); border: 1px solid var(--line); border-left: 4px solid var(--v1); animation: toastIn .35s cubic-bezier(.34,1.3,.5,1) both; }
.app-toast.ok { border-left-color: #16a34a; }
.app-toast.error { border-left-color: #e11d48; }
.app-toast.warn { border-left-color: #f59e0b; }
.app-toast .ti-icon { font-size: 1.2rem; color: var(--v1); }
.app-toast.ok .ti-icon { color: #16a34a; }
.app-toast.error .ti-icon { color: #e11d48; }
.app-toast.warn .ti-icon { color: #f59e0b; }
.app-toast .ti-body { flex: 1; font-size: .9rem; font-weight: 500; color: var(--ink); }
@keyframes toastIn { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
.app-toast.hide { animation: toastOut .25s ease forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(50px); } }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; position: relative; z-index: 1; }
.login-card { background: rgba(255,255,255,.82); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.6); border-radius: 30px; padding: 2.7rem; width: 100%; max-width: 420px; box-shadow: 0 40px 90px rgba(30,25,70,.28); animation: rise .5s ease both; }
.login-logo { width: 66px; height: 66px; border-radius: 20px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); font-size: 1.8rem; margin: 0 auto 1.2rem; box-shadow: 0 14px 30px rgba(124,92,255,.55); }

.modal-loading { padding: 3.5rem; text-align: center; }
.spinner-border { color: var(--v1); }

/* ---------- Configurateur baby-foot ---------- */
.conf-total { position: sticky; top: 1rem; }
/* Les trois montants (HT, TVA, TTC) restent lisibles : seul celui du tarif
   appliqué ressort, en grand et en couleur. Aucun n'est estompé, le client
   doit pouvoir lire la TVA et le HT même en tarif public. */
.conf-bareme { color: var(--v1); letter-spacing: .04em; }
.conf-amount { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); line-height: 1.1; transition: font-size .2s, color .2s; }
[data-controller~="configurateur"]:not(.tarif-public) .conf-ht .conf-amount,
[data-controller~="configurateur"].tarif-public .conf-ttc .conf-amount { font-size: 1.85rem; color: var(--v1); }

/* Étape sans option disponible (aucun modèle choisi, ou pièce hors modèle) :
   le bloc entier doit se lire comme inactif. Sans cela, 14 listes strictement
   identiques à des listes actives ne réagissaient pas au clic, sans un mot. */
.conf-etape-inactive .form-label { color: var(--ink-faint); opacity: .7; }
.conf-etape-inactive .ts-wrapper.disabled { opacity: .75; cursor: not-allowed; }
.conf-etape-inactive .ts-wrapper.disabled .ts-control,
[data-controller="configurateur"] .ts-wrapper.disabled .ts-control {
    background: #f1f0f6 !important; border-color: #e6e5f2 !important; color: #9a99a8 !important;
    border-style: dashed !important; pointer-events: none;
}
.conf-etape-inactive .ts-control .ts-placeholder, .conf-etape-inactive .ts-control input { color: #9a99a8 !important; }

/* Champ « Modèle choisi » laissé vide : signalement applicatif, en français,
   sous le champ concerné (la bulle native s'ancrait ailleurs, et en anglais).
   La classe est maison : `is-invalid` ferait rentrer l'habillage Bootstrap. */
[data-controller="configurateur"] .ts-wrapper.conf-invalide .ts-control { border-color: #e11d48 !important; box-shadow: 0 0 0 4px rgba(225,29,72,.12) !important; }
.conf-erreur { margin-top: .35rem; font-size: .85rem; font-weight: 600; color: #be123c; }

/* ---------- Tom Select (listes déroulantes recherchables) ---------- */
.ts-wrapper { margin: 0; }
/* Tom Select recopie les classes du <select> sur son enveloppe : le cadre, le
   rembourrage et le chevron de `.form-select` s'ajoutaient à ceux de la liste
   elle-même — second encadré et second chevron sur CHAQUE liste recherchable,
   et une dizaine de pixels perdus par champ. Neutralisé ici une fois pour toutes
   plutôt qu'écran par écran.
   `!important` comme sur le reste du bloc Tom Select : les habillages par zone
   (`.doc-bandeau .form-select`, par exemple) pèsent autant que ce sélecteur et
   reprendraient le dessus par leur seule position dans la feuille. */
.ts-wrapper.form-select, .ts-wrapper.form-control {
    padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
}
.ts-control { border-radius: 12px !important; border: 1.5px solid #e6e5f2 !important; padding: .45rem .8rem !important; background: #fbfbff !important; min-height: 44px; box-shadow: none !important; transition: border-color .15s, box-shadow .15s, background .15s; }
.ts-wrapper.focus .ts-control { border-color: var(--v1) !important; box-shadow: var(--ring) !important; background: #fff !important; }
.ts-control input { color: var(--ink) !important; }
.ts-control input::placeholder { color: #adb0c6 !important; }
.ts-wrapper.single .ts-control { cursor: pointer; }
.ts-wrapper.single .ts-control:after { border-color: #9a9cb8 transparent transparent !important; }
/* Recette V7 (A1) : la valeur choisie reste visible tant que la liste garde le
   focus (voir tom_select_controller.js#suivreSaisie). La recherche vide ne prend
   que la place restante ; une recherche en cours remplace la valeur affichée. */
/* Recherche vide : hors du flux (A-2, recette d'intégration). Une valeur longue
   qui passe sur deux lignes ne laisse plus de place à côté d'elle : la zone de
   saisie, même réduite à ses marges, ouvrait une troisième ligne (60 px au lieu
   de 42) et toute la page remontait de 18 px à la perte du focus, entre
   l'appui et le relâchement du clic suivant. Elle reste focalisable et reçoit
   la frappe ; dès la première lettre (`ts-saisie`), elle reprend sa place. */
.ts-wrapper.ts-auto.single.has-items:not(.ts-saisie) .ts-control > input {
    position: absolute !important; left: 0; top: 0; width: 1px !important; min-width: 0; opacity: 0; margin: 0 !important; pointer-events: none;
}
.ts-wrapper.ts-auto.single.has-items .ts-control > .item { flex: 0 1 auto; }
.ts-wrapper.ts-auto.single.has-items.ts-saisie .ts-control > .item { display: none; }
.ts-wrapper.ts-auto.single.has-items.ts-saisie .ts-control > input { min-width: 4rem; }
.ts-dropdown { border: 1.5px solid #e6e5f2; border-radius: var(--r-md); box-shadow: var(--sh-md); margin-top: 6px; padding: .3rem; }
.ts-dropdown .ts-dropdown-content { max-height: 320px; }
.ts-dropdown .option { border-radius: 9px; padding: .5rem .7rem; color: var(--ink); }
.ts-dropdown .option:hover, .ts-dropdown .active { background: var(--grad-soft) !important; color: var(--v1) !important; }
.ts-dropdown .option.selected { font-weight: 600; }
.ts-opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ts-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-supp { flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: var(--v1); background: #fff; border: 1px solid rgba(124,92,255,.22); border-radius: 20px; padding: .05rem .5rem; }
.ts-empty { padding: .55rem .7rem; color: var(--ink-faint); }

/* ---------- Dictée vocale ---------- */
.dictation-hint { color: #e11d48; font-weight: 500; }
.rec-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e11d48; margin-right: .35rem; vertical-align: middle; animation: recPulse 1s ease-in-out infinite; }
@keyframes recPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }
.dictating textarea { border-color: #f43f5e !important; box-shadow: 0 0 0 4px rgba(244, 63, 94, .12) !important; }
.dictating [data-dictation-target="button"] i { animation: recPulse 1s infinite; }

.sidebar-backdrop { display: none; }

@media (max-width: 992px) {
    .sidebar { position: fixed; z-index: 1050; margin: 0; height: 100vh; top: 0; left: 0; border-radius: 0 var(--r-xl) var(--r-xl) 0; transform: translateX(-105%); transition: transform .25s ease; }
    .app-shell.sidebar-open .sidebar { transform: translateX(0); box-shadow: 0 0 60px rgba(20,18,50,.5); }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(20,18,50,.45); backdrop-filter: blur(2px); z-index: 1049; opacity: 0; transition: opacity .25s; pointer-events: none; }
    .app-shell.sidebar-open .sidebar-backdrop { display: block; opacity: 1; pointer-events: auto; }
    .app-content { padding: 1.1rem; }
    .app-topbar { padding: .8rem 1.1rem; }
    .page-head h1 { font-size: 1.5rem; }
    .detail-grid { grid-template-columns: 1fr; }
    .dash-hero { padding: 1.5rem 1.4rem; }
}

/* ---------- Confirmation in-app (remplace window.confirm) ---------- */
/* z-index au-dessus de la modale AJAX (1055) pour s'empiler proprement. */
.confirm-overlay {
    position: fixed; inset: 0; z-index: 1090;
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    background: rgba(26,24,48,.42); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .2s ease;
}
.confirm-overlay.is-open { opacity: 1; }
.confirm-overlay[hidden] { display: none; }
.confirm-dialog {
    width: 100%; max-width: 420px; text-align: center;
    background: var(--surface); border-radius: var(--r-xl);
    box-shadow: var(--sh-lg); padding: 2rem 1.8rem 1.6rem;
    transform: translateY(14px) scale(.97);
    transition: transform .2s cubic-bezier(.34,1.3,.4,1);
}
.confirm-overlay.is-open .confirm-dialog { transform: none; }
.confirm-icon {
    width: 56px; height: 56px; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1.5rem;
    color: #e5484d; background: rgba(229,72,77,.12);
}
/* La pastille suit la nature du geste : un rond rouge d'alerte au-dessus d'un
   bouton vert « Réactiver » se contredisait. */
.confirm-overlay[data-variante="success"] .confirm-icon { color: #1a7f45; background: rgba(26,127,69,.12); }
.confirm-overlay[data-variante="warning"] .confirm-icon { color: #b26a00; background: rgba(178,106,0,.12); }
.confirm-overlay[data-variante="primary"] .confirm-icon { color: var(--v1, #7c5cff); background: rgba(124,92,255,.12); }
.confirm-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin: 0 0 .4rem; font-size: 1.15rem; }
.confirm-message { color: var(--ink-soft); margin: 0 0 1.4rem; }
.confirm-actions { display: flex; gap: .6rem; justify-content: center; }
.confirm-actions .btn { min-width: 120px; }

/* Planning — agenda hebdomadaire en grille horaire (reprend la présentation du CRM). */
.planning-cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; }
/* Recette V9 : du lundi au vendredi ; un samedi / dimanche portant des RDV
   ajoute sa colonne (--planning-jours, posé par la page). */
.planning-head, .planning-body { display: grid; grid-template-columns: 62px repeat(var(--planning-jours, 5), minmax(0, 1fr)); }
.planning-head { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(124,92,255,.04), transparent); }
.planning-gutter-head { border-right: 1px solid var(--line); }
.planning-day-head { padding: .5rem .35rem; text-align: center; border-left: 1px solid var(--line); }
.planning-day-head .pdh-dow { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); text-transform: capitalize; font-size: .82rem; }
.planning-day-head .pdh-date { font-size: .72rem; color: var(--ink-faint); }
.planning-day-head.is-today { background: var(--grad-soft); }
.planning-day-head.is-today .pdh-dow { color: var(--v1, #7c5cff); }
.planning-gutter { border-right: 1px solid var(--line); }
.planning-hour { position: relative; }
.planning-hour span { position: absolute; top: -.62em; right: .4rem; font-size: .68rem; color: var(--ink-faint); background: var(--surface); padding: 0 .15rem; }
.planning-col { position: relative; border-left: 1px solid var(--line); }
.planning-col.is-today { background: rgba(124,92,255,.035); }
.planning-slot { border-top: 1px solid var(--line); background-image: linear-gradient(to bottom, transparent calc(50% - .5px), color-mix(in srgb, var(--line) 55%, transparent) calc(50% - .5px), color-mix(in srgb, var(--line) 55%, transparent) calc(50% + .5px), transparent calc(50% + .5px)); }
.planning-slot:first-child { border-top: 0; }
.planning-event {
    position: absolute; left: 3px; right: 3px; z-index: 2;
    display: flex; flex-direction: column; gap: 1px; overflow: hidden;
    padding: 2px 6px; border-radius: 8px;
    /* Recette V9 : couleur du commercial (--rdv), réglée dans sa fiche. */
    background: color-mix(in srgb, var(--rdv, #7c5cff) 17%, var(--surface));
    border-left: 3px solid var(--rdv, #7c5cff);
    color: color-mix(in srgb, var(--rdv, #7c5cff) 62%, var(--ink));
    box-shadow: var(--sh-sm); text-decoration: none; line-height: 1.12;
    transition: transform .12s, box-shadow .12s;
}
.planning-event:hover { transform: translateY(-1px); box-shadow: var(--sh-md); z-index: 3; }
.planning-event .pe-time { font-weight: 700; font-size: .68rem; }
.planning-event .pe-title { font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planning-event .pe-meta { font-size: .66rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
    .planning-cal { overflow-x: auto; }
    .planning-head, .planning-body { min-width: 760px; }
    .planning-cal.is-day .planning-head, .planning-cal.is-day .planning-body { min-width: 0; }
}
/* Vue jour : une seule colonne. */
.planning-cal.is-day .planning-head,
.planning-cal.is-day .planning-body { grid-template-columns: 62px minmax(0, 1fr); }

/* Vue mensuelle. */
.planning-month { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; }
.pm-head { display: grid; grid-template-columns: repeat(var(--planning-jours, 5), minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(124,92,255,.04), transparent); }
.pm-dow { padding: .5rem .35rem; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: .8rem; color: var(--ink); }
.pm-week { display: grid; grid-template-columns: repeat(var(--planning-jours, 5), minmax(0, 1fr)); }
.pm-cell { position: relative; min-height: 108px; padding: .3rem .35rem .35rem; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.pm-cell:first-child { border-left: 0; }
.planning-day-head.is-weekend, .pm-dow.is-weekend { color: var(--ink-soft); }
.planning-col.is-weekend:not(.is-today), .pm-cell.is-weekend { background: color-mix(in srgb, var(--line) 22%, transparent); }
.pm-cell.is-muted { background: rgba(124,92,255,.02); }
.pm-cell.is-muted .pm-daynum { color: var(--ink-faint); opacity: .55; }
.pm-cell.is-today { background: rgba(124,92,255,.05); }
.pm-daynum { display: inline-flex; align-items: center; justify-content: center; min-width: 1.55rem; height: 1.55rem; border-radius: 50%; font-size: .78rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.pm-daynum:hover { background: var(--grad-soft); }
.pm-cell.is-today .pm-daynum { background: hsl(245 72% 55%); color: #fff; }
.pm-events { display: flex; flex-direction: column; gap: 2px; margin-top: .25rem; }
.pm-event {
    display: flex; align-items: center; gap: .3rem; overflow: hidden;
    padding: 1px 6px; border-radius: 6px; text-decoration: none; line-height: 1.25;
    background: color-mix(in srgb, var(--rdv, #7c5cff) 17%, var(--surface));
    border-left: 3px solid var(--rdv, #7c5cff);
    color: color-mix(in srgb, var(--rdv, #7c5cff) 62%, var(--ink));
    transition: transform .12s;
}
.pm-event:hover { transform: translateX(1px); }
.pm-event .pm-time { font-weight: 700; font-size: .64rem; flex: none; }
.pm-event .pm-title { font-size: .68rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
    .pm-cell { min-height: 78px; }
    .pm-event .pm-time { display: none; }
}
/* Recette V9 : clic sur une case vide (nouveau RDV) et glisser-déposer. */
.planning-col, .planning-allday-cell, .pm-cell { cursor: copy; }
.planning-event, .pm-event { cursor: grab; }
.planning-event.is-dragging, .pm-event.is-dragging { opacity: .45; }
.planning-drop { position: absolute; left: 3px; right: 3px; z-index: 4; pointer-events: none; border: 2px dashed var(--v1, #7c5cff); border-radius: 8px; background: rgba(124,92,255,.08); font-size: .68rem; font-weight: 700; color: var(--v1, #7c5cff); padding: 1px 6px; }
.planning-allday-cell.is-drop, .pm-cell.is-drop { background: rgba(124,92,255,.10); box-shadow: inset 0 0 0 2px rgba(124,92,255,.45); }
.planning-legende { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--rdv); margin-right: .3rem; vertical-align: -.05rem; }

/* Fiche client — onglets (style Aurora) + carte de localisation. */
.client-tabs { border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 2px; }
.client-tabs .nav-item { margin-bottom: -1px; }
.client-tabs .nav-link { border: 0; border-radius: 10px 10px 0 0; color: var(--ink-faint); font-weight: 600; font-size: .86rem; padding: .5rem .85rem; background: transparent; transition: background .12s, color .12s; }
.client-tabs .nav-link:hover { color: var(--ink); background: var(--grad-soft); }
.client-tabs .nav-link.active { color: var(--v1, #7c5cff); background: var(--surface); box-shadow: inset 0 -2px 0 var(--v1, #7c5cff); }
.client-tabs .nav-link .badge { font-weight: 700; }
.client-map { height: 360px; width: 100%; border-radius: 0 0 var(--r-lg) var(--r-lg); z-index: 0; background: #e8eef5; }
.client-map .map-pin { font-size: 26px; line-height: 1; text-align: center; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.client-map.is-empty { filter: grayscale(.6); opacity: .85; }
.leaflet-container { font: inherit; }

/* Tâches — pastille de validation rapide (remplace la case à cocher). */
/* Ligne client « appelable » : lien fiche + bouton d'appel magasin. */
.collection-item.ci-callable { gap: .95rem; cursor: default; }
.ci-callable .ci-link { display: flex; align-items: center; gap: .95rem; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
.ci-callable:hover .ci-title { color: var(--v1); }
.ci-code { font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--v1); margin-bottom: .05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-call { flex: 0 0 auto; white-space: nowrap; }
.ci-arrow-link { flex: 0 0 auto; color: #c3c6da; font-size: .8rem; text-decoration: none; padding: .25rem; transition: transform .16s, color .16s; }
.ci-callable:hover .ci-arrow-link { color: var(--v1); transform: translateX(3px); }
@media (max-width: 600px) {
    .ci-call { font-size: .8rem; padding: .3rem .5rem; }
}

.collection-item.ci-checkable { gap: .8rem; }
.ci-checkable .ci-link { display: flex; align-items: center; gap: .95rem; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
.ci-checkable .ci-title.is-struck { text-decoration: line-through; color: var(--ink-faint); }

.task-check {
    flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
    display: grid; place-items: center;
    border: 2px solid var(--line); border-radius: 50%;
    background: var(--surface); cursor: pointer;
    transition: border-color .18s, background .18s, transform .16s, box-shadow .18s;
}
.task-check:hover { border-color: #a99bff; transform: scale(1.08); box-shadow: 0 0 0 4px rgba(124, 92, 255, .12); }
.task-check:active { transform: scale(.94); }
.task-check .tc-svg { width: 15px; height: 15px; overflow: visible; }
.task-check .tc-svg path {
    fill: none; stroke: var(--ink-faint); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 26; stroke-dashoffset: 26; opacity: 0;
    transition: stroke-dashoffset .28s ease, opacity .15s;
}
.task-check:hover .tc-svg path { opacity: .5; stroke-dashoffset: 0; }
.task-check.is-done {
    border-color: transparent; background: var(--grad); box-shadow: var(--sh-glow);
    animation: taskPop .32s ease;
}
.task-check.is-done .tc-svg path { stroke: #fff; opacity: 1; stroke-dashoffset: 0; }
@keyframes taskPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.28); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .task-check, .task-check .tc-svg path { transition: none; }
    .task-check.is-done { animation: none; }
}

/* Zone de glisser-déposer de la photo produit. */
.dropzone {
    position: relative;
    display: grid; place-items: center;
    min-height: 140px; padding: 1.4rem; text-align: center; cursor: pointer;
    border: 2px dashed var(--line); border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(124, 92, 255, .03), transparent);
    transition: border-color .16s, background .16s, transform .12s;
}
.dropzone:hover { border-color: #a99bff; }
.dropzone.is-over { border-color: var(--v1, #7c5cff); background: var(--grad-soft); transform: scale(1.01); }
.dropzone .dz-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--ink-soft); pointer-events: none; }
.dropzone .dz-empty i { font-size: 1.9rem; color: var(--v1, #7c5cff); }
.dropzone .dz-preview { max-height: 210px; max-width: 100%; border-radius: 10px; box-shadow: var(--sh-sm); }
.dropzone .dz-clear {
    position: absolute; top: .5rem; right: .5rem;
    width: 30px; height: 30px; display: grid; place-items: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(20, 21, 31, .55); color: #fff; backdrop-filter: blur(4px);
    transition: background .15s, transform .15s;
}
.dropzone .dz-clear:hover { background: var(--ink); transform: scale(1.08); }
.cr-photo { max-width: 100%; max-height: 360px; border-radius: var(--r-md); box-shadow: var(--sh-sm); }

/* Galerie de photos article. */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .55rem; }
.gallery-item { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: #fafaff; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item form { position: absolute; top: 3px; right: 3px; margin: 0; }
.gallery-del { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: rgba(20,21,31,.6); color: #fff; font-size: .7rem; transition: background .15s, transform .15s; }
.gallery-del:hover { background: var(--danger, #e5484d); transform: scale(1.1); }

/* Mini-cartes comptes-rendus (encart détail RDV). */
.cr-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; }
.cr-mini { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .85rem; border-radius: var(--r-md); background: #fafaff; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s, border-color .12s; }
.cr-mini:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); border-color: #a99bff; }
.cr-mini-type { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--v1); }
.cr-mini-date { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.cr-mini-com { font-size: .82rem; color: var(--ink-faint); }

/* Compte-rendu lié (fiche tâche) — encart cliquable. */
.cr-linked { display: block; padding: 1rem 1.15rem; text-decoration: none; color: inherit; }
.cr-linked:hover { background: linear-gradient(90deg, rgba(124,92,255,.05), transparent 60%); }
.cr-linked-head { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--v1); }
.cr-linked-date { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin-bottom: .5rem; }
.cr-linked-contacts { font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.cr-linked-body { color: var(--ink-soft); }
.cr-linked-more { display: inline-flex; align-items: center; gap: .3rem; margin-top: .7rem; font-size: .82rem; font-weight: 600; color: var(--v1); }
.cr-linked:hover .cr-linked-more i { transform: translateX(3px); transition: transform .15s; }

/* ---------- Modale documents : lecture confortable des BC / devis ---------- */
.modal-doc { --bs-modal-width: min(1900px, 98vw); max-width: var(--bs-modal-width); }
@media (max-width: 991.98px) { .modal-doc { --bs-modal-width: 96vw; } }

/* ---------- Composants d'une référence, listés en ligne ---------- */
.composants-inline { font-size: .78rem; color: var(--ink-faint); line-height: 1.45; margin-top: .15rem; }
.composants-inline span:not(:last-child):after { content: " · "; color: #cfd0e2; }

/* ---------- Pastille de règlement d'une facture ---------- */
.pay-dot {
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    font-size: .74rem; font-weight: 600; padding: .16rem .5rem; border-radius: 999px;
}
.pay-dot.is-paid { background: rgba(34,197,94,.14); color: #15803d; }
.pay-dot.is-late { background: rgba(239,68,68,.14); color: #b91c1c; }
.pay-dot.is-due  { background: rgba(148,163,184,.18); color: #475569; }

/* ---------- Tableau de suivi des factures ---------- */
.table-factures { font-size: .88rem; }
/* Les intitulés reviennent à la ligne : « Conditions de paiement » ou
   « Société émettrice » sur une seule ligne imposaient à eux seuls une colonne
   deux fois trop large, et repoussaient « Règlement » et « Relance » hors écran. */
.table-factures th { font-weight: 600; color: var(--ink-faint); white-space: normal; }
.table-factures > :not(caption) > * > * { padding: .7rem .5rem; }
.table-factures .fp-input { max-width: 5.5rem; margin-left: auto; }
.table-factures .form-control-sm { min-width: 5rem; }
/* Conditions de paiement : le libellé revient à la ligne au lieu d'étirer la colonne. */
.table-factures td.small { max-width: 11rem; }
/* Société émettrice : la pastille de couleur reste collée au nom, qui peut
   passer à la ligne (« CADETEL — Ventes Directes »). */
.table-factures td.text-nowrap:has(.rounded-circle) { white-space: normal; }
/* Relance : la case « faite » et la note se partagent la place restante. */
.table-factures .form-check-label { white-space: nowrap; }
/* Poste étroit (portable 1366) : on resserre encore plutôt que de cacher des colonnes. */
@media (max-width: 1500px) {
    .table-factures { font-size: .8rem; }
    .table-factures > :not(caption) > * > * { padding: .6rem .35rem; }
    .table-factures .fp-input { max-width: 4.5rem; }
    .table-factures .form-control-sm { min-width: 4rem; }
    .table-factures td.small { max-width: 8.5rem; }
    /* Un nom de client sans espace (« …INTERDÉPARTEMENTALE… ») imposait à lui
       seul une colonne de 163 px : on l'autorise à se couper. */
    .table-factures td { overflow-wrap: anywhere; }
}
.suivi-flag { transition: opacity .2s; }

/* Entrée de menu illustrée par un emoji (pas d'icône adaptée dans la fonte). */
.sidebar-nav .nav-emoji { width: 1.1em; display: inline-block; text-align: center; font-size: 1.05rem; line-height: 1; }
.pay-dot.is-partial { background: rgba(245,158,11,.16); color: #b45309; }
.pay-dot.is-none    { background: rgba(148,163,184,.12); color: #64748b; }

/* ============================================================
   Formulaire d'un document de vente
   Les informations « Document » passent en bandeau pleine largeur
   et chaque article tient sur UNE ligne d'écran : 8 à 10 articles
   restent visibles sans défiler sur un écran 1080p.
   ============================================================ */

/* ---------- Bandeau d'en-tête (document, livraison, client direct) ---------- */
.doc-bandeau .card-header { padding: .45rem 1rem; font-size: .95rem; }
.doc-bandeau .card-body { padding: .55rem 1rem .6rem; }
.doc-bandeau .row { --bs-gutter-y: .3rem; }
.doc-bandeau .form-label { font-size: .72rem; margin-bottom: .1rem; line-height: 1.25; }
/* Le gabarit Bootstrap espace chaque champ de 1rem : dans un bandeau, c'est
   quatre lignes d'articles perdues à l'écran. La grille suffit à aérer. */
.doc-bandeau .mb-3 { margin-bottom: 0 !important; }
.doc-bandeau .form-control, .doc-bandeau .form-select { padding: .25rem .6rem; font-size: .85rem; line-height: 1.45; border-radius: 10px; }
.doc-bandeau .ts-control { min-height: 31px !important; padding: .13rem .55rem !important; border-radius: 10px !important; font-size: .85rem; }
.doc-bandeau .ts-control > input { margin: 0 !important; }
.doc-bandeau-note { font-family: var(--font-body); font-weight: 500; font-size: .78rem; color: var(--ink-faint); margin-left: .45rem; }
/* Sous-titre de section à l'intérieur d'un bandeau (« Commande & livraison »). */
.doc-sep { display: flex; align-items: center; gap: .7rem; margin-top: .3rem; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.doc-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.doc-sep .doc-bandeau-note { margin-left: 0; text-transform: none; letter-spacing: normal; }

/* ---------- Lignes d'articles : une ligne d'écran par article ---------- */
.lignes-tableau {
    --lignes-cols:
        minmax(8rem, 14rem)   /* article      */
        minmax(9rem, 1fr)     /* désignation  */
        minmax(3.6rem, 4.6rem)
        minmax(4.6rem, 6.4rem)
        minmax(4rem, 5.4rem)
        minmax(4rem, 5.2rem)
        minmax(4.4rem, 6.2rem)
        2.2rem;               /* suppression  */
}
.lignes-entete, .lignes-tableau .ligne-row { display: grid; grid-template-columns: var(--lignes-cols); gap: .35rem; align-items: center; }
.lignes-entete { padding: 0 .45rem .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.lignes-tableau .ligne-row { padding: .2rem .4rem; margin-bottom: .25rem; border: 1px solid var(--line); }
.lignes-tableau .form-control, .lignes-tableau .form-select { padding: .2rem .5rem; font-size: .84rem; line-height: 1.4; border-radius: 9px; }
.lignes-tableau .ts-control { min-height: 30px !important; padding: .1rem .5rem !important; border-radius: 9px !important; font-size: .84rem; }
.lignes-tableau .ts-control > input { margin: 0 !important; }
.lignes-tableau .lg-cell { min-width: 0; }
.lignes-tableau .lg-cell.lg-actions { display: flex; justify-content: center; }
.lignes-tableau .lg-suppr { --bs-btn-padding-x: .4rem; --bs-btn-padding-y: .05rem; line-height: 1.15; border-radius: 8px; }
.lignes-tableau .invalid-feedback { font-size: .72rem; margin-top: .1rem; }

/* Libellé de colonne rappelé au-dessus du champ quand l'en-tête ne tient plus. */
.lignes-tableau .lg-cell::before { content: attr(data-lg); display: none; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 767.98px) {
    .lignes-entete { display: none; }
    .lignes-tableau { --lignes-cols: repeat(auto-fit, minmax(6.5rem, 1fr)); }
    .lignes-tableau .ligne-row { padding: .55rem; row-gap: .5rem; }
    .lignes-tableau .lg-cell::before { display: block; margin-bottom: .12rem; }
    .lignes-tableau .lg-cell.lg-actions { justify-content: flex-end; }
}

/* Chrome réduit au minimum : tout l'espace gagné devient des lignes visibles. */
.lignes-card .card-header { padding: .45rem 1rem; font-size: .95rem; }
.lignes-card .card-body { padding: .6rem 1rem .7rem; }

.lignes-pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .65rem; }
.lignes-totaux { margin-left: auto; text-align: right; }

/* Le bouton Enregistrer reste atteignable, même sur un document de 20 lignes. */
.doc-actions {
    position: sticky; bottom: 0; z-index: 3;
    display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
    padding: .4rem 0; background: var(--surface); border-top: 1px solid var(--line);
}

/* ---------- Écrans courts (portables 1366 × 768) ----------
   Le bandeau « Document » et le chrome de la page mangeaient tout l'espace :
   deux lignes d'article visibles au lieu de huit. Sous 900 px de hauteur, on
   resserre libellés, rembourrages, gouttières et barre d'actions ; au-delà,
   rien ne bouge, les huit lignes y sont déjà acquises. Réservé aux écrans
   larges : en dessous de 992 px, la mise en page mobile prime. */
@media (min-width: 992px) and (max-height: 900px) {
    .app-topbar { padding: .45rem 2rem; }
    .app-content { padding: .7rem 2rem 1.2rem; }
    .page-head { margin-bottom: .5rem; }
    .page-head h1 { font-size: 1.2rem; }

    /* La modale se colle aux bords : chaque marge rendue est une ligne de plus.
       C'est la variable qu'il faut baisser, car la hauteur d'une modale
       défilante s'en déduit (`calc(100% - margin * 2)`). */
    .modal { --bs-modal-margin: .5rem; }
    .modal-header { padding: .5rem 1.5rem; }
    .modal-body { padding: .7rem 1rem; }

    .doc-form .card { margin-bottom: .55rem; }
    .doc-form .card-header { padding: .22rem 1rem; font-size: .85rem; }
    .doc-form .card-body { padding: .45rem 1rem .5rem; }

    .doc-bandeau .form-label { font-size: .68rem; margin-bottom: 0; line-height: 1.2; }
    .doc-bandeau .form-control, .doc-bandeau .form-select { padding: .1rem .55rem; font-size: .8rem; }
    .doc-bandeau .ts-control { min-height: 26px !important; padding: .02rem .5rem !important; font-size: .8rem; }
    .doc-bandeau .row { --bs-gutter-y: .3rem; }
    .doc-sep { margin-top: .05rem; font-size: .68rem; }

    .lignes-entete { padding: 0 .45rem .18rem; font-size: .64rem; }
    .lignes-tableau .ligne-row { padding: .1rem .4rem; margin-bottom: .18rem; }
    .lignes-tableau .form-control, .lignes-tableau .form-select { padding: .1rem .45rem; font-size: .82rem; }
    /* La liste d'articles est la cellule la plus haute : c'est elle qui fixe la
       hauteur de la rangée, donc le nombre de lignes tenant à l'écran. Tom
       Select impose 36 px de haut à son enveloppe, ce qui annulait toute
       réduction faite sur la liste elle-même. */
    .doc-bandeau .ts-wrapper, .lignes-tableau .ts-wrapper { min-height: 0; }
    /* `align-items` : sans lui, le libellé choisi reste collé en haut de la
       liste une fois celle-ci raccourcie. */
    .doc-bandeau .ts-control, .lignes-tableau .ts-control { align-items: center; }
    .lignes-tableau .ts-control { min-height: 27px !important; padding: .02rem .45rem !important; font-size: .82rem; line-height: 1.4; }
    .lignes-pied { margin-top: .4rem; }
    .lignes-pied .fs-5 { font-size: .95rem !important; }

    .doc-actions { padding: .18rem 0; }
    .doc-actions .btn { --bs-btn-padding-y: .18rem; --bs-btn-font-size: .85rem; }
}

/* Ligne de déduction d'acompte : calculée par le serveur, elle est présentée en
   lecture seule (pas de croix, champs grisés) plutôt que d'offrir des gestes
   sans effet. */
.ligne-row.ligne-verrouillee .lg-cell input,
.ligne-row.ligne-verrouillee .lg-cell select,
.ligne-row.ligne-verrouillee .lg-cell .ts-wrapper { pointer-events: none; background: var(--surface-2, #f1f2f4); opacity: .8; }
.lg-verrou { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--muted, #6c757d); }