/* ===== Identité visuelle du portail mafacture =====
   Vert de marque #00BE65 sur fond clair et calme. Sobre, pro, rassurant. */
:root{
  /* ===== Palette de marque — un seul endroit à modifier ===== */
  --brand:#00BE65;          /* vert principal */
  --brand-dark:#039B53;
  --brand-soft:#E6F8EF;
  --blue:#1F5FEA;           /* bleu d'accent */
  --blue-dark:#194EC0;
  --blue-active:#1642A4;
  --feature-bg:#ECEBE4;     /* fond des 3 blocs « feature » de l'accueil */
  --ink:#0E1B14;
  --prose:#3A463F;          /* texte courant des pages publiques (blogue, calc, métiers) */
  --muted:#5B6B62;
  --surface:#F5F8F6;
  --line:#E7ECE8;
  --lp-nav-h:5.5rem;        /* hauteur de la barre publique (header.landing) — ajuster ici */
  /* Variables Bootstrap branchées sur notre palette */
  --bs-primary:#00BE65;
  --bs-primary-rgb:0,190,101;
  --bs-link-color:#1F5FEA;
  --bs-link-color-rgb:31,95,234;
  --bs-link-hover-color:#194EC0;
}

/* Onglets / sous-menus (nav-pills) : bleu de marque, via variables */
.nav-pills{
  --bs-nav-pills-link-active-bg:var(--blue);
  --bs-nav-link-color:var(--blue);
  --bs-nav-link-hover-color:var(--blue-dark);
}

/* Onglets « contrôle segmenté » (Réglages) : les 4 onglets forment un bloc gris,
   l'actif est une pastille blanche. Le groupe se lit comme un seul commutateur. */
.settings-seg{
  display:inline-flex; gap:2px; flex-wrap:wrap;
  background:#F0F0EC; border:1px solid var(--line);
  border-radius:11px; padding:3px; width:max-content; max-width:100%;
}
.settings-seg .nav-item{ display:flex; }
.settings-seg .nav-link{
  --bs-nav-pills-link-active-bg:transparent;
  color:var(--muted); font-weight:500; border-radius:8px; padding:.4rem 1rem;
  transition:background-color .12s ease, color .12s ease;
}
.settings-seg .nav-link:hover{ color:var(--ink); }
.settings-seg .nav-link.active{
  background:#fff; color:var(--ink); font-weight:600;
  box-shadow:0 1px 2px rgba(14,27,20,.10);
}

/* Recherche Acuity en ligne : survol des résultats en vert pâle (fidèle à la maquette). */
#acuityInlineResults .list-group-item{ cursor:default; transition:background-color .12s ease; }
#acuityInlineResults .list-group-item:hover{ background:var(--brand-soft); }

*{ -webkit-font-smoothing:antialiased; }
body{
  background:var(--surface);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
h1,h2,h3,h4,.brand-wordmark,.display-face{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  letter-spacing:-.015em;
}

/* Marque */
.brand-wordmark{
  font-weight:800; font-size:1.18rem; color:var(--ink);
  text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
}
.brand-wordmark .dot{
  width:.62rem; height:.62rem; border-radius:50%;
  background:var(--brand); display:inline-block;
}
/* Logo agrandi de 25% dans le header de l'accueil uniquement */
.lp-nav .brand-wordmark{ font-size:1.475rem; }
.lp-nav .brand-wordmark .dot{ width:.775rem; height:.775rem; }
.text-brand{ color:var(--brand)!important; }

/* Boutons */
.btn-primary{
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-dark); --bs-btn-hover-border-color:var(--brand-dark);
  --bs-btn-active-bg:var(--brand-dark); --bs-btn-active-border-color:var(--brand-dark);
  --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand);
  font-weight:600;
}
/* Bouton secondaire : discret au repos, NOIR au survol (jamais le gris de Bootstrap).
   Une seule définition, donc le comportement est le même sur toutes les pages. */
.btn-outline-secondary{
  --bs-btn-color:var(--muted); --bs-btn-bg:#fff; --bs-btn-border-color:var(--line);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:rgb(48,48,48); --bs-btn-hover-border-color:rgb(48,48,48);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:rgb(32,32,32); --bs-btn-active-border-color:rgb(32,32,32);
}
/* ── Journal du suivi d'envoi (fiche de facture) ──
   Un journal se lit à la verticale : une colonne d'heures alignées, puis ce qui
   s'est passé. Rien en gras — un journal n'a pas de titres, il a des entrées. */
.suivi{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:auto 1fr; gap:.6rem .75rem;
        max-height:17rem; overflow-y:auto; }
.suivi::-webkit-scrollbar{ width:8px; }
.suivi::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.suivi li{ display:contents; }
.suivi-h{ color:var(--muted); font-size:.8125rem; font-variant-numeric:tabular-nums; white-space:nowrap; padding-top:.05rem; }
.suivi-e{ font-size:.875rem; color:var(--ink); min-width:0; }
.suivi-e.echec{ color:#C0392B; }
/* Ligne secondaire : adresse, raison d'un rebond, compteur d'ouvertures. */
.suivi-sec{ display:block; font-size:.78125rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suivi-sous-titre{ font-size:.8125rem; color:var(--muted); margin-top:.05rem; }
.suivi-jour{ font-size:.78125rem; color:var(--muted); margin-top:.9rem;
  padding-top:.55rem; border-top:1px solid var(--line); }

/* ── Pastilles de filtre (choix unique) ──
   Périodes des Rapports, statut des Clients. Un « btn-group » disait « barre
   d'outils » alors qu'il s'agit d'un filtre : une seule pastille est pleine. */
.pastilles{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pastille{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.375rem 1rem; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--muted); font-size:.875rem; font-weight:500;
  text-decoration:none; line-height:1.4; transition:background-color .12s, color .12s, border-color .12s;
}
.pastille:hover{ border-color:var(--brand); color:var(--brand); }
.pastille[aria-current="true"]{
  background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600;
}
.pastille[aria-current="true"]:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }

/* « Noir » de marque : rgb(48,48,48). Réservé aux boutons de confirmation d'un
   envoi (lien de carte) et aux boutons de recherche Acuity (« Chercher » de la
   liste des clients + « Acuity » du formulaire de facture). Jamais une action
   d'en-tête concurrençant le vert primaire. */
.btn-noir{
  --bs-btn-color:#fff; --bs-btn-bg:rgb(48,48,48); --bs-btn-border-color:rgb(48,48,48);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:rgb(32,32,32); --bs-btn-hover-border-color:rgb(32,32,32);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:rgb(32,32,32); --bs-btn-active-border-color:rgb(32,32,32);
}
.btn-blue{
  --bs-btn-color:#fff; --bs-btn-bg:var(--blue); --bs-btn-border-color:var(--blue);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--blue-dark); --bs-btn-hover-border-color:var(--blue-dark);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--blue-active); --bs-btn-active-border-color:var(--blue-active);
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--blue); --bs-btn-disabled-border-color:var(--blue);
  font-weight:600;
}
.btn-access-footer{
  --bs-btn-color:#fff; --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--brand-dark); --bs-btn-hover-border-color:var(--brand-dark);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--brand-dark); --bs-btn-active-border-color:var(--brand-dark);
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand);
  font-weight:600;
}

/* Boutons d'action compacts et uniformes (listes) — hauteur fixe, sans icône, typo Inter */
.btn-chip{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 1rem; border-radius:10px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:.82rem; line-height:1;
  white-space:nowrap; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:background .15s, color .15s, border-color .15s;
}
.btn-chip:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.btn-chip-neutral{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn-chip-neutral:hover{ background:var(--surface); color:var(--ink); }
.btn-chip-warn{ background:#FFF6E6; color:#9A6B00; border-color:#F1E2BD; }
.btn-chip-warn:hover{ background:#FBEED0; color:#9A6B00; }
.btn-chip-go{ background:var(--brand-soft); color:var(--brand-dark); border-color:#C8EED9; }
.btn-chip-go:hover{ background:#D5F3E3; color:var(--brand-dark); }
.btn-chip-danger{ background:#FCEAEA; color:#C0392B; border-color:#F3D2D0; }
.btn-chip-danger:hover{ background:#F8DBD9; color:#C0392B; }

/* Barre de navigation de l'app */
.app-nav{ background:#fff; border-bottom:1px solid var(--line); padding-block:.5rem; }
.app-nav .nav-link{ color:var(--muted); font-weight:500; border-radius:8px; padding:.4rem .7rem; }
.app-nav .nav-link:hover{ color:var(--ink); background:var(--surface); }
.app-nav .nav-link.active{ color:var(--brand-dark); background:var(--brand-soft); }

/* Cartes */
.card{ border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(14,27,20,.03); }
.card-soft{ background:#fff; }

/* Cartes indicateurs (KPI) */
.kpi{ position:relative; }
.kpi .kpi-label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:600;
}
.kpi .kpi-value{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:1.9rem; line-height:1.1; letter-spacing:-.02em; }
/* Cartes teintées douces — une teinte par indicateur (option 3) */
.kpi.kpi-green  { background:var(--brand-soft); }
.kpi.kpi-green  .kpi-label, .kpi.kpi-green  .kpi-value { color:var(--brand-dark); }
.kpi.kpi-blue   { background:#E7EEFD; }
.kpi.kpi-blue   .kpi-label, .kpi.kpi-blue   .kpi-value { color:var(--blue-dark); }
.kpi.kpi-amber  { background:#FEF3E2; }
.kpi.kpi-amber  .kpi-label, .kpi.kpi-amber  .kpi-value { color:#B45309; }
.kpi.kpi-violet { background:#F1EBFD; }
.kpi.kpi-violet .kpi-label, .kpi.kpi-violet .kpi-value { color:#6D28D9; }
.kpi .kpi-value .muted{ color:inherit!important; opacity:.65; }

/* Badges de statut */
.badge-status{ font-weight:600; padding:.34em .7em; border-radius:999px; font-size:.74rem; white-space:nowrap; }
.badge-draft{ background:#EEF1EF; color:#5B6B62; }
.badge-sent{ background:#FFF3DC; color:#9A6B00; }
.badge-paid{ background:var(--brand-soft); color:var(--brand-dark); }
.badge-void{ background:#FDE7E7; color:#B42318; }
.badge-refunded{ background:#F3E8FF; color:#7E22CE; }
/* Livraison échouée : la facture n'a jamais atteint le client. Rouge, parce que
   c'est le seul état de cette liste qui exige une action immédiate. */
.badge-nondelivre{ background:#FCEBEB; color:#A32D2D; }
/* Facture en retard (échue et impayée) : rouge PLEIN, texte blanc.
   Toutes les autres pastilles ont un fond pâle : « En retard » est donc la seule
   remplie, ce qui en fait l'élément qui attire l'œil — précisément l'état qui appelle
   une relance. Le plein la distingue nettement d'« Annulée » (rouge pâle, état clos). */
.badge-retard{ background:#E24B4A; color:#ffffff; }

/* Cases de sélection d'un tableau.
   Bootstrap dimensionne .form-check-input en « em » : la case hérite donc de la
   taille du texte de sa cellule. Comme l'entête est à .74rem et les lignes à 1rem,
   la case du « tout sélectionner » apparaissait 26 % plus petite que les autres.
   On fige la taille en rem pour qu'elles soient identiques, où qu'elles soient. */
.bulk-check{ width:1rem; height:1rem; margin-top:0; vertical-align:middle; }

/* Barre segmentée : cinq segments font environ 520 px et ne tiennent pas sur un
   téléphone. Plutôt que de les replier sur deux rangées — ce qui casse l'effet de
   groupe — la barre défile au doigt sur une seule ligne. La barre de défilement
   est masquée : c'est le débordement visible du dernier segment qui annonce la
   suite, comme dans les applications mobiles natives. */
.segments-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:2px; }
.segments-scroll::-webkit-scrollbar{ display:none; }
.segments-scroll .btn-group{ flex-wrap:nowrap; }
/* Chaque libellé sur UNE ligne (Bootstrap 5 laisse le texte casser par défaut) :
   sinon « À encaisser (7) » se replie en 3 lignes et désaligne la barre. Le
   débordement est absorbé par le défilement horizontal ci-dessus. */
.segments-scroll .btn{ white-space:nowrap; }
.badge-part-refunded{ background:#FCEFE0; color:#B45309; }

/* Tableaux */
.table thead th{ font-size:.74rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:600; border-bottom:1px solid var(--line); }
.table td{ vertical-align:middle; }

/* Pages d'authentification (accueil, connexion, choix d'entreprise) */
.auth-wrap{ min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:2rem 1rem;
  background:
    radial-gradient(60rem 40rem at 50% -10%, var(--brand-soft), transparent 60%),
    var(--surface);
}
.auth-card{ width:100%; max-width:420px; background:#fff; border:1px solid var(--line);
  border-radius:20px; padding:2.2rem; box-shadow:0 10px 40px rgba(14,27,20,.06); }
.auth-card .form-label{ font-weight:600; font-size:.85rem; }
.muted{ color:var(--muted); }

/* Sélecteur d'entreprise */
.company-pill{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line);
  background:#fff; border-radius:999px; padding:.3rem .8rem; font-weight:600; color:var(--ink); }
.company-pill img{ height:20px; width:auto; border-radius:4px; }


/* ===== Barre latérale verticale (bleu --blue, items mafacture) ===== */
:root{ --sidebar:var(--blue); --sidebar-line:rgba(255,255,255,.16); --bs-offcanvas-width:250px; }

.layout{ display:flex; min-height:100vh; align-items:stretch; }

.sidebar{ width:250px; background:var(--sidebar) !important; color:rgba(255,255,255,.88); }
.sidebar.offcanvas-lg{ border:0; }
@media (min-width:992px){
  .sidebar{ position:sticky; top:0; height:100vh; flex:0 0 250px; }
  .sidebar .offcanvas-body{ height:100vh; }
}
.sidebar .offcanvas-body{ display:flex; flex-direction:column; padding:0; }

/* Entreprise + rôle : même typo que le menu mais nettement plus petit */
.side-top{ padding:1rem .8rem .5rem; }
.co-switch{ width:100%; text-align:left; background:rgba(255,255,255,.08);
  border:1px solid var(--sidebar-line); border-radius:12px; color:#fff;
  padding:.5rem .7rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.co-switch:hover{ background:rgba(255,255,255,.14); }
.co-switch .co-block{ display:flex; flex-direction:column; min-width:0; }
.co-switch .co-name{ font-weight:700; font-size:.8rem; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.co-switch .role{ font-size:.68rem; color:rgba(255,255,255,.62); }

.side-nav{ padding:.5rem; flex:1 1 auto; overflow-y:auto; }
.side-nav a{ display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:10px;
  color:rgba(255,255,255,.86); text-decoration:none; font-weight:500; font-size:.95rem; margin-bottom:2px; }
.side-nav a:hover{ background:rgba(255,255,255,.10); color:#fff; }
.side-nav a.active{ background:var(--blue-active); color:#fff; }
.side-nav a i{ font-size:1.05rem; opacity:.95; width:1.25rem; text-align:center; }

/* Sous-section « Administration » : petite et secondaire */
.side-section-label{ font-size:.66rem; text-transform:uppercase; letter-spacing:.09em;
  color:rgba(255,255,255,.55); font-weight:700; padding:.9rem .8rem .25rem; margin-top:.4rem;
  border-top:1px solid var(--sidebar-line); }
.side-nav a.side-sm{ font-size:.82rem; color:rgba(255,255,255,.68); padding:.45rem .8rem; }
.side-nav a.side-sm i{ font-size:.92rem; }

.side-foot{ padding:.7rem .8rem; border-top:1px solid var(--sidebar-line); }
.user-pill{ width:100%; text-align:left; display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.08); border:1px solid var(--sidebar-line); border-radius:10px;
  color:rgba(255,255,255,.92); padding:.45rem .7rem; font-size:.82rem; }
.user-pill:hover{ background:rgba(255,255,255,.14); }

.content{ flex:1 1 auto; min-width:0; background:var(--surface); }
.content-inner{ padding:1.6rem clamp(1rem,3vw,2.2rem); }
/* Conteneur centré à deux largeurs : l'en-tête ET le contenu partagent la même
   largeur, donc tout reste aligné (le « ⋯ » ne file plus au bord de l'écran).
   .page-narrow = formulaires/détails; .page-wide = listes/tableaux/tableau de bord. */
.page-container{ width:100%; margin-inline:auto; }
.page-container.page-narrow{ max-width:820px; }
.page-container.page-wide{ max-width:1140px; }

.mobile-bar{ background:var(--sidebar); color:#fff; padding:.55rem .8rem;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; position:sticky; top:0; z-index:1030; }

/* Bouton « Envoyer par courriel » (bleu, distinct du vert « Payée ») */
.btn-send{ background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600; }
.btn-send:hover,.btn-send:focus{ background:var(--blue-dark); border-color:var(--blue-dark); color:#fff; }

/* Bouton « Encaissement manuel » (contour bleu discret, style secondaire) */
.btn-counter{ background:#fff; border:1px solid var(--blue); color:var(--blue); font-weight:600; }
.btn-counter:hover,.btn-counter:focus{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* Bouton « Repasser en brouillon » (noir encre, au lieu du gris) */
.btn-ink{ background:#12181F; border-color:#12181F; color:#fff; font-weight:600; }
.btn-ink:hover,.btn-ink:focus{ background:#000; border-color:#000; color:#fff; }

/* Contrôle segmenté du statut de facture (lot 144) : un clic sur un segment bascule
   le statut (avec confirmation) ; segment actif en noir encre ; segment désactivé
   quand la transition est interdite (ex. facture payée par Stripe). */
.seg-status{ display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
.seg-status form{ flex:1 1 0; display:flex; margin:0; min-width:0; }
.seg-status .seg{ flex:1 1 0; min-width:0; border:0; background:transparent; color:var(--muted);
  font-size:.85rem; font-weight:600; padding:.45rem .2rem; cursor:pointer; }
.seg-status > * + *{ border-left:1px solid var(--line); }
/* Segment actif : vert de marque. Le noir venait du même accident que « Rech. Acuity ». */
.seg-status .seg.active{ background:var(--brand); color:#fff; cursor:default; }
.seg-status .seg:disabled{ color:#C9C6BC; cursor:not-allowed; background:#FAFAF7; }
.seg-status .seg:not(.active):not(:disabled):hover{ background:var(--surface); color:#12181F; }

/* ===== Page d'accueil (marketing sobre, sur invitation) ===== */
/* L'accueil remplit toujours la hauteur de l'écran, et s'adapte au redimensionnement */
.lp-body{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.lp-body .lp-hero{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; }

.lp-nav{ background:#fff; border-bottom:1px solid var(--line); }
.lp-hero{ background:
  radial-gradient(50rem 30rem at 80% -10%, var(--brand-soft), transparent 60%), #fff;
  border-bottom:1px solid var(--line); }
.lp-hero h1{ font-size:clamp(2rem,4vw,3rem); line-height:1.08; }
.lp-eyebrow{ font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-dark); }
.lp-feature{ background:var(--feature-bg); border:1px solid var(--line); border-radius:16px; height:100%; }
.lp-feature .ico{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; background:var(--brand-soft); color:var(--brand-dark); font-size:1.3rem; }


/* ===== Visuels défilants de l'accueil ===== */
.hero-stage{ position:relative; max-width:430px; margin-inline:auto; height:300px; }
.hero-slide{ position:absolute; inset:0; opacity:0; }
.hero-slide.is-active{ opacity:1; }
.hero-card{ background:#fff; border:1px solid var(--line); border-radius:18px; height:100%; box-sizing:border-box;
  box-shadow:0 18px 50px rgba(14,27,20,.10); padding:1.5rem;
  display:flex; flex-direction:column; justify-content:center; }
.hero-card .row-line{ display:flex; justify-content:space-between; padding:.28rem 0; }
.hero-dots{ display:flex; gap:.4rem; justify-content:center; margin-top:1.1rem; }
.hero-dots button{ width:8px; height:8px; border-radius:50%; border:0; background:#CBD6CE;
  padding:0; cursor:pointer; transition:width .25s, background .25s; }
.hero-dots button.is-active{ background:var(--brand); width:22px; border-radius:999px; }
.mini-bar{ display:flex; align-items:flex-end; gap:6px; height:64px; }
.mini-bar span{ flex:1; background:var(--brand-soft); border-radius:5px 5px 0 0; }
.mini-bar span.hi{ background:var(--brand); }
.lp-features{ background:#fff; }

/* Carrousel des fonctionnalités */
.feat-carousel{ overflow:hidden; }
.feat-track{ display:flex; gap:1.5rem; align-items:stretch; will-change:transform; }
.feat-slide{ flex:0 0 calc((100% - 3rem) / 3); display:flex; }
.feat-slide > .lp-feature{ width:100%; }
@media (max-width:992px){ .feat-slide{ flex-basis:calc((100% - 1.5rem) / 2); } }
@media (max-width:640px){ .feat-slide{ flex-basis:100%; } }
.feat-nav{ display:flex; gap:1rem; justify-content:center; margin-top:1.75rem; }
.feat-arrow{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--brand); font-size:1.15rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
.feat-arrow:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }


/* Boîte d'appel à l'action (fond noir, texte blanc) */
.lp-cta{ background:var(--blue); color:#fff; }
.lp-cta h2{ color:#fff; }
.lp-cta .muted{ color:rgba(255,255,255,.72) !important; }

/* Bouton d'action du popup (bleu) */
.btn-cta{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-cta:hover, .btn-cta:focus{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }

/* Footer de l'accueil (fond noir, texte blanc) */
.lp-footer{ background:var(--blue); color:rgba(255,255,255,.85); }
/* Les liens héritent exactement de la typo du texte « © mafacture » (couleur, taille, weight) */
.lp-footer a{ color:inherit; font-size:inherit; font-weight:inherit; text-decoration:none; }
.lp-footer a:hover{ color:inherit; opacity:.7; }

/* Espacement standard sous l'en-tête d'une page (titre/barre d'actions → contenu).
   Valeur centrale : la modifier ici la change PARTOUT où .page-header est utilisée. */
.page-header { margin-bottom: 3rem; }   /* 48px — la SEULE distance entre un en-tête et son contenu */

/* Lien de retour NOMMÉ, au-dessus du titre. Voir templates/portal/_retour.html.
   Une flèche seule n'annonce pas sa destination ; ce lien l'écrit. */
.retour-lien{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.9375rem; font-weight:500; text-decoration:none;
  color:var(--blue); padding:.25rem 0;
}
.retour-lien:hover{ color:var(--blue); text-decoration:underline; }
.retour-lien .bi{ font-size:1rem; }

/* Mobile : plus d'air latéral sur les pages publiques (landing, calculatrices, légales) */
@media (max-width:575.98px){
  .lp-body .container{ padding-left:30px; padding-right:30px; }
}

/* ===== Header public : hauteur pilotée par --lp-nav-h, contenu centré ===== */
.lp-nav .container{ min-height:var(--lp-nav-h); }
.lp-body > main{ flex:1 0 auto; }   /* pousse le footer en bas même sans hero */

/* ===== Choix segmenté (ex. « Première facture : à la date / aujourd'hui ») ===== */
.seg-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.seg-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.seg-btn{ margin:0; padding:9px 18px; font-family:'Inter',sans-serif; font-weight:600; font-size:.84rem;
  color:var(--muted); cursor:pointer; user-select:none; white-space:nowrap;
  border-left:1px solid var(--line); transition:background .15s, color .15s; }
.seg-toggle > .seg-input:first-child + .seg-btn{ border-left:0; }
.seg-input:checked + .seg-btn{ background:var(--brand); color:#fff; }
.seg-input:focus-visible + .seg-btn{ outline:2px solid var(--brand); outline-offset:2px; }

/* ===== FAQ accordéon + CTA mafacture unifiés (calculateurs ET blogue) =====
   Source de vérité UNIQUE du style : les gabarits utilisent les partiels
   _faq_accordion.html et _cta_mafacture.html. Ne pas dupliquer ces règles. */
.calc-accordion{ --bs-accordion-active-color:#039B53; --bs-accordion-active-bg:#E6F8EF; --bs-accordion-border-color:#e7ece8; --bs-accordion-btn-color:#0E1B14; --bs-accordion-btn-focus-box-shadow:none; --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23039B53'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.calc-accordion .accordion-button{ font-weight:700; font-size:1.02rem; }
.calc-accordion .accordion-body{ color:var(--prose); line-height:1.65; }
.calc-accordion{ margin-top:30px; }
/* Neutralise les styles d'article (marges/typo des h3 et p du blogue) DANS l'accordéon,
   pour que la FAQ soit identique au pixel près partout. */
.calc-accordion .accordion-header{ margin:0; }
.calc-accordion .accordion-body p{ margin:0; }
.calc-cta { background:#f0f9f4; border:1px solid #cdebda; border-radius:16px; padding:24px; margin-top:2.5rem; text-align:center; }


/* ── Historique des activités (facture) : une timeline à pastilles ────────────
   Chaque action est un point relié par une ligne verticale fine. Texte à 13 px,
   sans gras ; l'horodatage à droite, à chasse fixe. Une facture vit des mois,
   donc l'horodatage porte la date complète, pas seulement l'heure. */
/* Fond gris pâle pour distinguer l'historique des cartes blanches principales. */
.card.card-activite { background: #F6F6F3; border-color: #E3E3DE; }
/* Option F : le bas de l'historique s'estompe pour signaler qu'il y a plus. */
.chrono-wrap{ position:relative; }
.chrono-fade::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3rem;
  background:linear-gradient(to bottom, rgba(246,246,243,0), #F6F6F3); pointer-events:none; }
.chrono-plus{ display:flex; justify-content:center; margin-top:.5rem; }
.chrono-plus .retour-lien{ color:var(--brand-dark); font-weight:600; }
.chrono-plus .retour-lien:hover{ color:var(--brand-dark); }
.chrono { list-style: none; margin: 0; padding: 0; position: relative; }
.chrono::before { content: ""; position: absolute; left: 4.5px; top: .8rem; bottom: .8rem; width: 1.5px; background: #D8D8D2; }
.chrono-item { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .35rem 0 .35rem 1.5rem; }
.chrono-dot { position: absolute; left: 0; top: .55rem; width: 10px; height: 10px; border-radius: 50%; background: rgb(48, 48, 48); box-sizing: border-box; }
.chrono-txt { font-size: 13px; font-weight: 400; color: rgb(48, 48, 48); line-height: 1.5; min-width: 0; }
.chrono-who { color: #6c757d; }
.chrono-who::before { content: " · "; }
.chrono-when { font-size: 13px; font-weight: 400; color: #6c757d; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Actions de la carte Statut : petits boutons alignés, comme « Modifier le
   paiement ». Plus de d-grid pleine largeur. ── */
.statut-actions > * + * { margin-top: .5rem; }

/* Numéro de facture cliquable dans « Factures récentes » (tableau de bord) :
   repos neutre (hérite du noir semi-gras de la cellule), vert foncé + souligné au survol. */
.lien-facture{ color:inherit; text-decoration:none; }
.lien-facture:hover, .lien-facture:focus{ color:var(--brand-dark); text-decoration:underline; }

/* Bouton divisé (split) : fine ligne verticale translucide pour démarquer la
   flèche (menu) du bouton principal. Sur les boutons pleins (vert/noir), un
   blanc translucide fait un séparateur discret et conforme aux standards. */
.btn-group > .dropdown-toggle-split.btn-primary,
.btn-group > .dropdown-toggle-split.btn-noir { border-left: 1px solid rgba(255, 255, 255, .45); }

/* Choix d'entreprise : au survol, on met seulement la bordure en vert (pas le
   remplissage noir de la règle générale des boutons contour). */
.company-choice{
  --bs-btn-hover-color:var(--muted); --bs-btn-hover-bg:var(--brand-soft); --bs-btn-hover-border-color:var(--brand);
  --bs-btn-active-color:var(--muted); --bs-btn-active-bg:var(--brand-soft); --bs-btn-active-border-color:var(--brand);
}
/* Liseré interne : épaissit la bordure verte à ~2 px sans décaler le contenu. */
.company-choice:hover, .company-choice:focus{ box-shadow:inset 0 0 0 1px var(--brand); }

/* Menu de changement d'entreprise : survol vert pâle (cohérent avec les cartes
   d'entreprise et l'entreprise active en vert). Limité à ce menu. */
.company-menu{ --bs-dropdown-link-hover-bg: var(--brand-soft); --bs-dropdown-link-active-bg: var(--brand-soft); }
.company-menu .dropdown-item:active{ color: inherit; }

/* ── Ajustements MOBILE (Phase 1) ──────────────────────────────────────────
   Onglets Réglages : au lieu de déborder sur 2 lignes, ils défilent sur UNE
   ligne (glisser horizontalement). Logos d'entreprise masqués pour gagner de
   l'espace (ex. écran « Quelle entreprise? »). Ordinateur : inchangé.        */
@media (max-width: 575.98px){
  .settings-seg{
    display:flex; flex-wrap:nowrap; overflow-x:auto; width:100%;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .settings-seg::-webkit-scrollbar{ display:none; }
  .settings-seg .nav-link{ white-space:nowrap; }
}

/* ── Phase 2 mobile : barre (titre + AJ) et bouton flottant « créer » ─────── */
.mb-title .mb-t{ display:block; font-weight:600; font-size:1rem; line-height:1.15; color:#fff; }
.mb-title .mb-s{ display:block; font-size:.72rem; line-height:1.1; color:#fff; opacity:.82; }
.mb-avatar{
  width:34px; height:34px; border-radius:50%; border:none; flex-shrink:0;
  background:rgba(255,255,255,.25); color:#fff; font-size:.78rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.fab-create{
  position:fixed; right:16px; z-index:1045;
  bottom:16px; bottom:calc(16px + env(safe-area-inset-bottom));
}
.fab-btn{
  width:60px; height:60px; border-radius:50%; border:none;
  background:var(--brand); color:#fff; font-size:1.85rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(14,27,20,.35);
  animation:fab-pop .35s cubic-bezier(.34,1.56,.64,1);   /* petit « pop » à l'ouverture, une fois */
}
.fab-btn:active{ transform:scale(.96); }
@keyframes fab-pop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .fab-btn{ animation:none; } }

/* ── KPI compacts sur mobile (les 4 cases du tableau de bord) ─────────────── */
@media (max-width: 575.98px){
  .kpi .card-body{ padding:.7rem .85rem; }
  .kpi .kpi-label{ font-size:.64rem; letter-spacing:.04em; margin-bottom:.15rem!important; }
  .kpi .kpi-value{ font-size:1.3rem; white-space:nowrap; }
}

/* ── Sélecteur de client avec recherche (Nouvelle facture) ────────────────── */
.client-combo{ position:relative; }
.client-combo-list{
  position:absolute; z-index:1050; left:0; right:0; top:100%; margin-top:3px;
  background:#fff; border:1px solid var(--line); border-radius:9px; padding:4px;
  max-height:260px; overflow-y:auto; list-style:none;
  box-shadow:0 8px 20px rgba(14,27,20,.14);
}
.client-combo-list li{ padding:9px 12px; border-radius:7px; cursor:pointer; font-size:.95rem; }
.client-combo-list li:hover, .client-combo-list li.active{ background:var(--brand-soft); }
.client-combo-list li.empty{ color:var(--muted); cursor:default; }

/* ✕ pour vider le champ de recherche de client (gris discret, jamais rouge) */
.client-combo input{ padding-right:2rem; }
.client-combo-clear{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  border:none; background:transparent; color:var(--muted);
  padding:4px 6px; line-height:1; cursor:pointer; font-size:.8rem; border-radius:6px;
}
.client-combo-clear:hover{ color:var(--ink); background:var(--brand-soft); }

/* ✕ « effacer » intégré au champ de recherche de liste (même look que le sélecteur de client) */
.search-group .form-control{ border-right:0; }
.search-group .search-clear{
  display:flex; align-items:center; padding:0 .7rem; cursor:pointer;
  background:#fff; color:var(--muted); font-size:.8rem;
  border:1px solid var(--line); border-left:0;
}
.search-group .search-clear:hover{ color:var(--ink); }
.search-group .search-clear[hidden]{ display:none; }


/* Badge « Programmée » : un brouillon en attente d'envoi automatique */
.badge-status.badge-programme{ background:#E6F1FB; color:#185FA5; }

/* ── Barre publique : liens Métiers / Blogue ──────────────────────────────
   Ajoutés pour le maillage interne (le blogue n'était lié nulle part depuis
   l'accueil). Masqués sous 576 px : sur un petit écran, le wordmark et le
   bouton « Se connecter » doivent rester lisibles — les liens restent
   atteignables par le pied de page. */
.lp-nav-link{
  color:var(--ink); text-decoration:none; font-size:.9375rem; font-weight:500;
  padding:.25rem 0; transition:color .12s;
}
.lp-nav-link:hover{ color:var(--brand-dark); }
.lp-nav-link.is-actif{ color:var(--brand-dark); font-weight:700; }
@media (max-width:575.98px){ .lp-nav-link{ display:none; } }

/* ── Page Métiers (/logiciel-facturation/) ────────────────────────────────
   Même largeur de lecture et même typographie que les calculateurs et le
   blogue : les trois pages publiques doivent se ressembler au pixel près. */
.metiers-wrap{ max-width:760px; }
.metiers-fil{ font-size:.8125rem; color:var(--muted); margin-bottom:1rem; }
.metiers-fil a{ color:var(--muted); text-decoration:none; }
.metiers-fil a:hover{ color:var(--brand-dark); }
.metiers-fil span{ margin:0 .35rem; }
.metiers-h1{ font-size:2rem; line-height:1.25; margin-bottom:1rem; }
.metiers-intro{ color:var(--prose); line-height:1.65; font-size:1.05rem; }

/* Sommaire en pastilles : l'équivalent du menu déroulant, sans JavaScript. */
.metiers-sommaire{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:20px; margin-top:2rem;
}
.metiers-sommaire-label{
  font-size:.6875rem; letter-spacing:.08em; color:var(--muted);
  font-weight:600; margin-bottom:.75rem;
}
/* Même grille régulière que la bande de l'accueil : 8 pastilles en flex-wrap
   produisaient 7 + 1 orpheline. Cible d'au moins 44 px au doigt. */
.metiers-sommaire .pastilles{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem;
}
.metiers-sommaire .pastille{
  flex-direction:column; gap:.45rem; padding:.9rem .5rem; min-height:74px;
  border-radius:12px; text-align:center;
  transition:background-color .12s, color .12s, border-color .12s, transform .12s, box-shadow .12s;
}
.metiers-sommaire .pastille i{ font-size:1.45rem; color:var(--brand); line-height:1; }
.metiers-sommaire .pastille span{ font-size:.85rem; }
.metiers-sommaire .pastille:hover{
  border-color:var(--brand); color:var(--brand); background:var(--brand-soft);
  transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.06);
}
@media (max-width:767.98px){
  .metiers-sommaire .pastilles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:575.98px){
  .metiers-sommaire .pastille{ font-size:.8rem; padding:.55rem .4rem; }
}

.metiers-sec h2{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.35rem;
  margin-top:2.6rem; margin-bottom:.6rem; color:var(--ink);
}
.metiers-sec p{ color:var(--prose); line-height:1.65; }
.metiers-besoin{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--brand-soft); color:var(--brand-dark);
  border-radius:999px; padding:.3rem .85rem; font-size:.8125rem; font-weight:600;
  margin-bottom:.85rem;
}
.metiers-liste{
  list-style:none; padding:0; margin:.9rem 0 0;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.metiers-liste li{
  border:1px solid var(--line); border-radius:8px; background:#fff;
  padding:.3rem .7rem; font-size:.8125rem; color:var(--muted);
}
/* Pages dédiées : cartes cliquables (icône + titre), pour mettre en valeur le renvoi. */
.metiers-cartes{ margin:1.3rem 0 0; }
.metiers-cartes-label{
  display:block; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:.6rem;
}
.metiers-cartes-grille{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.65rem;
}
.metiers-carte{
  display:flex; align-items:center; gap:.7rem;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  padding:.7rem .85rem; text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.metiers-carte:hover{
  border-color:var(--brand); background:var(--brand-soft);
  transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.metiers-carte-ico{
  flex:none; width:38px; height:38px; border-radius:10px;
  background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.metiers-carte:hover .metiers-carte-ico{ background:#fff; }
.metiers-carte-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.metiers-carte-titre{ font-weight:700; color:var(--ink); font-size:.95rem; }
.metiers-carte-sous{ font-size:.75rem; color:var(--muted); font-weight:500; }
.metiers-carte-fleche{
  margin-left:auto; color:var(--muted); font-size:1rem; flex:none;
  transition:color .15s ease, transform .15s ease;
}
.metiers-carte:hover .metiers-carte-fleche{ color:var(--brand); transform:translateX(2px); }
/* Décale l'ancre sous la barre pour que le H2 ne soit pas collé en haut. */
.metiers-sec[id]{ scroll-margin-top:1.5rem; }

/* Clic sur une carte de métier : la section visée s'illumine brièvement.
   Pur CSS via :target — aucun JavaScript, aucun contenu caché (SEO intact). */
html{ scroll-behavior:smooth; }
.metiers-sec:target{ animation:metier-flash 1.8s ease-out 1; border-radius:12px; }
@keyframes metier-flash{
  0%{ background:var(--brand-soft); }
  100%{ background:transparent; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .metiers-sec:target{ animation:none; }
}


/* ── Accueil : zone rédactionnelle, métiers, FAQ ──────────────────────────
   Même largeur de lecture (760 px) et même typographie que les calculateurs,
   le blogue et la page Métiers : les pages publiques se ressemblent partout. */
.prose-wrap{ max-width:760px; }
.lp-prose{ background:#fff; }
.lp-prose p{ color:var(--prose); line-height:1.65; }
.lp-prose a{ color:var(--brand-dark); font-weight:600; }

/* ── Section rédactionnelle en deux colonnes (option D, 2026-08-14) ──────────
   Colonne de gauche collante pendant le défilement du corps : le lecteur garde
   le contexte de la section sous les yeux. Remplace un bloc unique centré, qui
   se lisait comme un article plutôt que comme une page produit.
   Le sticky ne tient QUE si aucun parent ne porte overflow:hidden — d'où la
   grille dédiée plutôt qu'un .row Bootstrap. */
.prose-grid{
  display:grid; grid-template-columns:minmax(200px,270px) 1fr; gap:3rem;
  max-width:1040px; margin:0 auto;
}
.prose-aside{ position:sticky; top:2rem; align-self:start; }
.prose-kicker{
  font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand-dark); font-weight:700; margin:0 0 .5rem;
}
.lp-prose .prose-aside h2{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:1.5rem; line-height:1.2; margin:0; color:var(--ink);
}
.prose-accroche{ font-size:.9rem; margin:.75rem 0 0; }
.prose-bloc{ padding-bottom:1.9rem; margin-bottom:1.9rem; border-bottom:1px solid var(--line); }
.prose-bloc:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:0; }
.lp-prose .prose-bloc h3{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.15rem;
  margin:0 0 .55rem; color:var(--ink);
}
.lp-prose .prose-bloc p:last-child{ margin-bottom:0; }
/* Sous 900 px : une seule colonne, la gauche redevient un en-tête ordinaire.
   `position:static` désamorce le sticky, qui n'a aucun sens empilé. */
@media (max-width:899.98px){
  .prose-grid{ grid-template-columns:1fr; gap:1.75rem; max-width:760px; }
  .prose-aside{ position:static; }
  .lp-prose .prose-aside h2{ font-size:1.35rem; }
}

/* ── Bande « métiers » (options E + D, 2026-08-14) ───────────────────────────
   Fond = var(--ink), l'encre déjà utilisée par tous les titres : aucune couleur
   nouvelle. Le gris #f7f9f8 précédent se confondait avec les cartes de
   fonctionnalités qui suivent — trois valeurs proches à la file.
   Filigrane de points en radial-gradient répété : aucune image à télécharger,
   donc aucun poids ajouté à la page. Opacité volontairement basse (10 %) : la
   texture doit se deviner, pas se voir. */
.lp-metiers{
  background-color:var(--ink);
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:26px 26px;
  background-position:0 0;
}
.lp-metiers h2{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:1.45rem; text-align:center; color:#fff; margin:0 0 .4rem;
}
.lp-metiers-aide{
  text-align:center; font-size:.92rem; color:rgba(255,255,255,.72); margin:0 0 1.6rem;
}

/* Grille régulière plutôt qu'un flex-wrap : avec 8 sections, le retour à la
   ligne automatique produisait 7 + 1, une pastille orpheline centrée. Les
   paliers ne retiennent que des diviseurs de 8 (4, 2) pour que chaque ligne
   soit toujours pleine. Un test refuse que le nombre de sections cesse d'être
   un multiple de 4. */
.lp-metiers .pastilles{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75rem; max-width:56rem; margin:0 auto;
}
.lp-metiers .pastille{
  padding:.65rem 1rem; background:transparent;
  border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.92);
  justify-content:center; text-align:center;
}
.lp-metiers .pastille:hover{
  border-color:var(--brand); color:var(--brand); background:rgba(0,190,101,.12);
}
.lp-metiers-pme{
  text-align:center; font-size:.85rem; color:rgba(255,255,255,.72); margin:1.6rem 0 0;
}
.lp-metiers-pme a{ color:var(--brand); font-weight:600; }
.lp-metiers-pme a:hover{ color:#fff; }
/* 2 colonnes sous 768 px : 4 lignes pleines, jamais d'orpheline. */
@media (max-width:767.98px){
  .lp-metiers .pastilles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
}
@media (max-width:575.98px){
  .lp-metiers h2{ font-size:1.2rem; }
  .lp-metiers .pastille{ font-size:.8rem; padding:.6rem .5rem; }
}

.lp-faq{ background:#fff; }
.lp-faq h2{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.35rem; color:var(--ink); }
.faq-plus{ margin-top:1.25rem; text-align:center; }
.faq-plus a{ color:var(--brand-dark); font-weight:600; text-decoration:none; }
.faq-plus a:hover{ text-decoration:underline; }

/* ── Lignes de facture : lisibilité de la saisie ──────────────────────────
   Point 1 — champs nombre sans flèches (▲▼) : elles volaient la place des
   chiffres (« 36 » apparaissait coupé). On garde la saisie au clavier. */
#linesTable input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
#linesTable input[type=number]::-webkit-outer-spin-button,
#linesTable input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Point 5 — sous 768 px, chaque ligne devient une carte étiquetée : plus
   rien de serré, on ne dépend plus du défilement horizontal du tableau.
   Sur grand écran, le tableau reste identique. */
@media (max-width:767.98px){
  #linesTable{ min-width:0 !important; }
  #linesTable thead{ display:none; }
  #linesTable, #linesTable tbody{ display:block; }
  #linesTable tr.line-row{
    display:block; background:#fff;
    border:1px solid var(--line); border-radius:10px;
    padding:10px 12px; margin-bottom:12px;
  }
  #linesTable tr.line-row td{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:auto !important; border:0; padding:.35rem 0; text-align:left;
  }
  #linesTable tr.line-row td::before{
    content:attr(data-label);
    flex:0 0 auto; font-size:.72rem; font-weight:600; color:var(--muted);
  }
  #linesTable tr.line-row td .form-control,
  #linesTable tr.line-row td .form-select,
  #linesTable tr.line-row td .input-group{ max-width:62%; }
  #linesTable tr.line-row td.line-amount{ font-weight:600; }
  /* Colonne « supprimer » : bouton à droite, sans étiquette. */
  #linesTable tr.line-row td.line-remove{ justify-content:flex-end; }
  #linesTable tr.line-row td.line-remove::before{ content:""; }
}

/* ── Rabais : champ élargi + bascule $/% (remplace le menu déroulant) ──────
   Le nombre prend la largeur disponible ; le type $/% devient deux petits
   boutons. La valeur envoyée au serveur (champ caché .line-disctype) reste
   « amount » ou « percent » — aucun changement côté données. */
.rabais-group{ display:flex; align-items:center; gap:6px; }
.rabais-group .line-discount{ flex:1 1 auto; min-width:0; text-align:right; }
.disctype-seg{ display:inline-flex; flex:0 0 auto; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.disctype-btn{ border:0; background:#fff; color:var(--muted); font-size:.85rem; line-height:1.2; padding:6px 10px; cursor:pointer; }
.disctype-btn + .disctype-btn{ border-left:1px solid var(--line); }
.disctype-btn.is-active{ background:var(--brand); color:#fff; font-weight:600; }

/* ── Bas de carte de ligne sur petit écran (option 1) ─────────────────────── */
@media (max-width:767.98px){
  /* Le champ rabais (nombre + bascule) occupe la portion droite, comme les autres. */
  #linesTable tr.line-row td .rabais-group{ max-width:62%; }

  /* Non taxable : la case à cocher devient un interrupteur clair. */
  #linesTable tr.line-row td .notax-toggle{
    -webkit-appearance:none; appearance:none; position:relative; flex:0 0 auto;
    width:42px; height:24px; border-radius:999px; background:var(--line);
    border:0; cursor:pointer; transition:background-color .15s;
  }
  #linesTable tr.line-row td .notax-toggle::after{
    content:""; position:absolute; top:2px; left:2px; width:20px; height:20px;
    border-radius:50%; background:#fff; transition:left .15s;
  }
  #linesTable tr.line-row td .notax-toggle:checked{ background:var(--brand); }
  #linesTable tr.line-row td .notax-toggle:checked::after{ left:20px; }

  /* Montant : bloc mis en évidence (point focal de la carte). */
  #linesTable tr.line-row td.line-amount{
    background:var(--brand-soft); border-radius:8px; padding:10px 12px;
    font-size:1.05rem; font-weight:600; color:var(--brand-dark); margin-top:4px;
  }

  /* Supprimer : bouton pleine largeur avec libellé (au lieu du « × » isolé). */
  #linesTable tr.line-row td.line-remove{ display:block; }
  #linesTable tr.line-row td.line-remove .removeLine{
    display:block; width:100%; font-size:0; text-decoration:none;
    border:1px solid #f5c6cb; border-radius:8px; padding:11.5px !important; margin-top:8px;
  }
  #linesTable tr.line-row td.line-remove .removeLine::after{
    content:"Supprimer la ligne"; font-size:.82rem;
  }
}

/* ── Ajustements mobile (ligne de facture) ────────────────────────────────
   Non taxable : l'interrupteur s'aligne sur le bord gauche des champs du
   dessus (colonne 62 %). Supprimer : rouge plein au survol. */
@media (max-width:767.98px){
  #linesTable tr.line-row td .notax-wrap{
    width:62%; flex:0 0 62%; display:flex; justify-content:flex-start;
  }
  #linesTable tr.line-row td.line-remove .removeLine:hover,
  #linesTable tr.line-row td.line-remove .removeLine:focus{
    background:#e24b4a; border-color:#e24b4a; color:#fff;
  }
  #linesTable tr.line-row td.line-remove .removeLine:hover::after,
  #linesTable tr.line-row td.line-remove .removeLine:focus::after{ color:#fff; }
}