/* ===== 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;
  --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; }
.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; }
.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; }
.company-logo-sm{ height:22px; width:auto; }


/* ===== 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:#3a463f; 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; }