/* ==========================================================================
   Tagmind — thème Bootstrap 5.3
   À charger JUSTE APRÈS le CSS de Bootstrap.
   Redéfinit les variables --bs-* + quelques surcharges de composants
   pour retrouver le design system avec les classes Bootstrap habituelles.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* --------------------------------------------------------------------------
   1. Variables globales
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {

  /* ---- Palette de marque ---- */
  --bs-blue:        #2d9556;
  --bs-green:       #1a6b3c;
  --bs-red:         #c0392b;
  --bs-yellow:      #c47e1a;
  --bs-gray:        #9a9790;
  --bs-gray-dark:   #5a574f;

  /* ---- Couleurs sémantiques ---- */
  --bs-primary:        #1a6b3c;   /* vert accent */
  --bs-secondary:      #5a574f;   /* encre tiède */
  --bs-success:        #2d9556;
  --bs-info:           #c47e1a;   /* or */
  --bs-warning:        #c47e1a;
  --bs-danger:         #c0392b;
  --bs-light:          #f2f0eb;   /* surface */
  --bs-dark:           #0f0e0c;   /* encre */

  --bs-primary-rgb:    26, 107, 60;
  --bs-secondary-rgb:  90, 87, 79;
  --bs-success-rgb:    45, 149, 86;
  --bs-info-rgb:       196, 126, 26;
  --bs-warning-rgb:    196, 126, 26;
  --bs-danger-rgb:     192, 57, 43;
  --bs-light-rgb:      242, 240, 235;
  --bs-dark-rgb:       15, 14, 12;

  /* ---- Texte sur fond coloré (utilitaires .text-bg-*) ---- */
  --bs-primary-text-emphasis:   #1a6b3c;   /* = encadré "Opportunité" du DS */
  --bs-secondary-text-emphasis: #3b392f;
  --bs-success-text-emphasis:   #1a6b3c;
  --bs-info-text-emphasis:      #8a5a12;
  --bs-warning-text-emphasis:   #8a5a12;
  --bs-danger-text-emphasis:    #8a241b;

  /* ---- Fonds atténués (.alert-*, .text-bg-*-subtle, .list-group-item-*) ---- */
  --bs-primary-bg-subtle:   #e8f4ee;
  --bs-secondary-bg-subtle: #f2f0eb;
  --bs-success-bg-subtle:   #e8f4ee;
  --bs-info-bg-subtle:      #fdf3e3;
  --bs-warning-bg-subtle:   #fdf3e3;
  --bs-danger-bg-subtle:    #fde8e8;
  --bs-light-bg-subtle:     #faf9f6;
  --bs-dark-bg-subtle:      #c9c6bf;

  /* ---- Bordures atténuées ---- */
  --bs-primary-border-subtle:   #c1deca;
  --bs-secondary-border-subtle: #e0ddd7;
  --bs-success-border-subtle:   #c1deca;
  --bs-info-border-subtle:      #efd9b0;
  --bs-warning-border-subtle:   #efd9b0;
  --bs-danger-border-subtle:    #f0c4bf;
  --bs-light-border-subtle:     #e0ddd7;
  --bs-dark-border-subtle:      #9a9790;

  /* ---- Surfaces & texte du corps ---- */
  --bs-body-color:        #0f0e0c;
  --bs-body-color-rgb:    15, 14, 12;
  --bs-body-bg:           #faf9f6;
  --bs-body-bg-rgb:       250, 249, 246;

  --bs-emphasis-color:        #0f0e0c;
  --bs-emphasis-color-rgb:    15, 14, 12;
  --bs-secondary-color:       rgba(15, 14, 12, 0.65);   /* ≈ #5a574f */
  --bs-secondary-color-rgb:   15, 14, 12;
  --bs-secondary-bg:          #f2f0eb;
  --bs-secondary-bg-rgb:      242, 240, 235;
  --bs-tertiary-color:        rgba(15, 14, 12, 0.45);    /* ≈ #9a9790 */
  --bs-tertiary-color-rgb:    15, 14, 12;
  --bs-tertiary-bg:           #f2f0eb;
  --bs-tertiary-bg-rgb:       242, 240, 235;

  /* ---- Bordures ---- */
  --bs-border-color:           #e0ddd7;
  --bs-border-color-translucent: rgba(15, 14, 12, 0.12);

  /* ---- Liens ---- */
  --bs-link-color:        #1a6b3c;
  --bs-link-color-rgb:    26, 107, 60;
  --bs-link-hover-color:  #145930;
  --bs-link-hover-color-rgb: 20, 89, 48;

  /* ---- Anneau de focus ---- */
  --bs-focus-ring-color:  rgba(26, 107, 60, 0.25);

  /* ---- Sélection de code ---- */
  --bs-highlight-bg:      #fdf3e3;
  --bs-code-color:        #c0392b;

  /* ---- Typographie ---- */
  --bs-font-sans-serif:  'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size:   1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;

  /* ---- Rayons ---- */
  --bs-border-radius:        0.5rem;    /* 8px  — défaut / boutons / champs */
  --bs-border-radius-sm:     0.375rem;  /* 6px  */
  --bs-border-radius-lg:     0.75rem;   /* 12px — cartes */
  --bs-border-radius-xl:     0.875rem;  /* 14px */
  --bs-border-radius-xxl:    1rem;      /* 16px */
  --bs-border-radius-pill:   999px;
}

/* --------------------------------------------------------------------------
   2. Typographie — titres en Instrument Serif
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
}

/* Chiffres / montants : on peut viser .font-serif pour le serif tabulaire */
.font-serif { font-family: 'Instrument Serif', Georgia, serif !important; }

/* Overline / libellés de section */
.overline,
.text-overline {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9790;
}

/* --------------------------------------------------------------------------
   3. Boutons
   Bootstrap fige les couleurs des .btn-* à la compilation : on réécrit
   leurs variables locales --bs-btn-* pour suivre la palette.
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: 0.5rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.6rem;
}

.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #1a6b3c;
  --bs-btn-border-color: #1a6b3c;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #145930;
  --bs-btn-hover-border-color: #145930;
  --bs-btn-focus-shadow-rgb: 26, 107, 60;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #114d29;
  --bs-btn-active-border-color: #114d29;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #1a6b3c;
  --bs-btn-disabled-border-color: #1a6b3c;
}

.btn-secondary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #5a574f;
  --bs-btn-border-color: #5a574f;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #46443d;
  --bs-btn-hover-border-color: #46443d;
  --bs-btn-focus-shadow-rgb: 90, 87, 79;
  --bs-btn-active-bg: #46443d;
  --bs-btn-active-border-color: #46443d;
  --bs-btn-disabled-bg: #5a574f;
  --bs-btn-disabled-border-color: #5a574f;
}

.btn-success {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #2d9556;
  --bs-btn-border-color: #2d9556;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #257d48;
  --bs-btn-hover-border-color: #257d48;
  --bs-btn-focus-shadow-rgb: 45, 149, 86;
  --bs-btn-active-bg: #257d48;
  --bs-btn-active-border-color: #257d48;
  --bs-btn-disabled-bg: #2d9556;
  --bs-btn-disabled-border-color: #2d9556;
}

.btn-info {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #c47e1a;
  --bs-btn-border-color: #c47e1a;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #a86a14;
  --bs-btn-hover-border-color: #a86a14;
  --bs-btn-focus-shadow-rgb: 196, 126, 26;
  --bs-btn-active-bg: #a86a14;
  --bs-btn-active-border-color: #a86a14;
  --bs-btn-disabled-bg: #c47e1a;
  --bs-btn-disabled-border-color: #c47e1a;
}

.btn-warning {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #c47e1a;
  --bs-btn-border-color: #c47e1a;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #a86a14;
  --bs-btn-hover-border-color: #a86a14;
  --bs-btn-focus-shadow-rgb: 196, 126, 26;
  --bs-btn-active-bg: #a86a14;
  --bs-btn-active-border-color: #a86a14;
  --bs-btn-disabled-bg: #c47e1a;
  --bs-btn-disabled-border-color: #c47e1a;
}

.btn-danger {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #c0392b;
  --bs-btn-border-color: #c0392b;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #a32f23;
  --bs-btn-hover-border-color: #a32f23;
  --bs-btn-focus-shadow-rgb: 192, 57, 43;
  --bs-btn-active-bg: #a32f23;
  --bs-btn-active-border-color: #a32f23;
  --bs-btn-disabled-bg: #c0392b;
  --bs-btn-disabled-border-color: #c0392b;
}

.btn-light {
  --bs-btn-color: #0f0e0c;
  --bs-btn-bg: #f2f0eb;
  --bs-btn-border-color: #e0ddd7;
  --bs-btn-hover-color: #0f0e0c;
  --bs-btn-hover-bg: #e7e4dd;
  --bs-btn-hover-border-color: #d8d4cc;
  --bs-btn-focus-shadow-rgb: 90, 87, 79;
  --bs-btn-active-bg: #e0ddd7;
  --bs-btn-active-border-color: #d8d4cc;
  --bs-btn-disabled-bg: #f2f0eb;
  --bs-btn-disabled-border-color: #e0ddd7;
}

.btn-dark {
  --bs-btn-color: #faf9f6;
  --bs-btn-bg: #0f0e0c;
  --bs-btn-border-color: #0f0e0c;
  --bs-btn-hover-color: #faf9f6;
  --bs-btn-hover-bg: #1a6b3c;
  --bs-btn-hover-border-color: #1a6b3c;
  --bs-btn-focus-shadow-rgb: 15, 14, 12;
  --bs-btn-active-bg: #1a6b3c;
  --bs-btn-active-border-color: #1a6b3c;
  --bs-btn-disabled-bg: #0f0e0c;
  --bs-btn-disabled-border-color: #0f0e0c;
}

/* ---- Boutons "outline" ---- */
.btn-outline-primary {
  --bs-btn-color: #1a6b3c;
  --bs-btn-border-color: #1a6b3c;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #1a6b3c;
  --bs-btn-hover-border-color: #1a6b3c;
  --bs-btn-focus-shadow-rgb: 26, 107, 60;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #1a6b3c;
  --bs-btn-active-border-color: #1a6b3c;
  --bs-btn-disabled-color: #1a6b3c;
  --bs-btn-disabled-border-color: #1a6b3c;
}

.btn-outline-secondary {
  --bs-btn-color: #5a574f;
  --bs-btn-border-color: #e0ddd7;
  --bs-btn-hover-color: #0f0e0c;
  --bs-btn-hover-bg: #f2f0eb;
  --bs-btn-hover-border-color: #5a574f;
  --bs-btn-focus-shadow-rgb: 90, 87, 79;
  --bs-btn-active-color: #0f0e0c;
  --bs-btn-active-bg: #f2f0eb;
  --bs-btn-active-border-color: #5a574f;
  --bs-btn-disabled-color: #9a9790;
  --bs-btn-disabled-border-color: #e0ddd7;
}

.btn-outline-danger {
  --bs-btn-color: #c0392b;
  --bs-btn-border-color: #f0c4bf;
  --bs-btn-hover-color: #c0392b;
  --bs-btn-hover-bg: #fde8e8;
  --bs-btn-hover-border-color: #f0c4bf;
  --bs-btn-focus-shadow-rgb: 192, 57, 43;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #c0392b;
  --bs-btn-active-border-color: #c0392b;
  --bs-btn-disabled-color: #c0392b;
  --bs-btn-disabled-border-color: #f0c4bf;
}

.btn-link {
  --bs-btn-color: #1a6b3c;
  --bs-btn-hover-color: #145930;
  --bs-btn-active-color: #114d29;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   4. Champs de formulaire — focus vert
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
  border-color: #e0ddd7;
  border-radius: 0.5rem;
}
.form-control:focus,
.form-select:focus {
  border-color: #1a6b3c;
  box-shadow: 0 0 0 0.2rem rgba(26, 107, 60, 0.15);
}
/* Barre de recherche : anneau de focus sur tout le groupe (icone + champ) plutot que sur le champ seul */
.search-group {
  border-radius: 0.5rem;
  transition: box-shadow 0.15s ease-in-out;
}
.search-group:focus-within {
  box-shadow: 0 0 0 0.2rem rgba(26, 107, 60, 0.15);
}
.search-group:focus-within .form-control,
.search-group:focus-within .input-group-text {
  border-color: #1a6b3c;
  box-shadow: none;
}

/* Menu de suggestions de la recherche globale. Il se superpose au contenu de la page, d'ou le
   z-index : au-dessus des cartes et des tableaux, sous les modales de Bootstrap (1055). */
.search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 1040;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
}
/* Une suggestion se survole et se parcourt au clavier : les deux etats se ressemblent, seul le
   focus garde un liseré, qui est le seul repere quand on navigue aux fleches. */
.search-suggestion:hover {
  background-color: #f5f3ef;
}
.search-suggestion:focus {
  background-color: #f5f3ef;
  outline: 2px solid rgba(26, 107, 60, 0.35);
  outline-offset: -2px;
}
.form-check-input:checked {
  background-color: #1a6b3c;
  border-color: #1a6b3c;
}
.form-check-input:focus {
  border-color: #1a6b3c;
  box-shadow: 0 0 0 0.2rem rgba(26, 107, 60, 0.15);
}
.form-switch .form-check-input:checked {
  background-color: #1a6b3c;
  border-color: #1a6b3c;
}
.form-range::-webkit-slider-thumb { background-color: #1a6b3c; }
.form-range::-moz-range-thumb     { background-color: #1a6b3c; }

/* --------------------------------------------------------------------------
   5. Divers composants
   -------------------------------------------------------------------------- */

/* Cartes — rayon plus généreux */
.card {
  --bs-card-border-color: #e0ddd7;
  --bs-card-border-radius: 0.75rem;
  --bs-card-bg: #ffffff;
}

/* Liens dans le texte */
a {
  color: var(--bs-link-color);
  text-decoration-color: rgba(26, 107, 60, 0.35);
}

/* Pagination & onglets actifs */
.nav-link {
  --bs-nav-link-color: #5a574f;
  --bs-nav-link-hover-color: #1a6b3c;
}
.nav-pills {
  --bs-nav-pills-link-active-bg: #1a6b3c;
  --bs-nav-pills-link-active-color: #ffffff;
}
.page-link {
  --bs-pagination-color: #1a6b3c;
  --bs-pagination-active-bg: #1a6b3c;
  --bs-pagination-active-border-color: #1a6b3c;
  --bs-pagination-focus-color: #145930;
  --bs-pagination-hover-color: #145930;
}

/* Listes */
.list-group {
  --bs-list-group-active-bg: #1a6b3c;
  --bs-list-group-active-border-color: #1a6b3c;
  --bs-list-group-color: #0f0e0c;
}

/* Progress & spinners reprennent --bs-primary automatiquement */
.progress-bar { background-color: #1a6b3c; }

/* Badges
   Dans le design system, les badges de STATUT sont subtils (fond clair +
   texte de marque), alors que seuls les badges de PLAN Pro/Business sont
   pleins. On reproduit ces vrais composants : .text-bg-primary / .text-bg-dark
   restent pleins (Pro / Business), les autres .text-bg-* deviennent subtils. */
.badge {
  --bs-badge-font-weight: 600;
  font-weight: 600;
}

.badge.text-bg-success {
  color: #1a6b3c !important;
  background-color: #e8f4ee !important;
}
.badge.text-bg-warning,
.badge.text-bg-info {
  color: #c47e1a !important;
  background-color: #fdf3e3 !important;
}
.badge.text-bg-danger {
  color: #c0392b !important;
  background-color: #fde8e8 !important;
}
.badge.text-bg-secondary,
.badge.text-bg-light {
  color: #5a574f !important;
  background-color: #f2f0eb !important;
}
/* Pro (vert plein) & Business (encre pleine) : valeurs Bootstrap conservées */
.badge.text-bg-primary { color: #ffffff !important; background-color: #1a6b3c !important; }
.badge.text-bg-dark    { color: #ffffff !important; background-color: #0f0e0c !important; }

/* Tableaux */
.table {
  --bs-table-color: #0f0e0c;
  --bs-table-border-color: #f2f0eb;
  --bs-table-striped-bg: rgba(242, 240, 235, 0.5);
  --bs-table-hover-bg: #f2f0eb;
}
.table > thead { color: #9a9790; }

/* Dropdown actif */
.dropdown-menu {
  --bs-dropdown-link-active-bg: #1a6b3c;
  --bs-dropdown-link-active-color: #ffffff;
  --bs-dropdown-border-color: #e0ddd7;
}

/* Tooltips / popovers */
.tooltip { --bs-tooltip-bg: #0f0e0c; }

/* Accent générique pour .border, .text-* utilitaires : déjà couverts par les
   variables --bs-*-rgb définies plus haut. */

/* Coquille des écrans du compte : toute la hauteur de la fenêtre. En unités dynamiques quand
   le navigateur les connaît, car sur téléphone 100vh compte la barre d'adresse et cache le bas
   de l'écran derrière elle. */
.app-shell {
  height: 100vh;
  height: 100dvh;
}

/* Bandeau de rappel du « se connecter en tant que » (10.3) : posé au-dessus de toutes les
   pages par le gabarit de base. Il n'est pas fixé mais reste en tête du flux, la coquille et
   les écrans centrés cédant la hauteur qu'il occupe — un bandeau superposé masquerait la
   barre supérieure, seul endroit d'où l'on ouvre le menu sur téléphone. */
/* La hauteur est portée par le body, seul endroit d'où le bandeau et les coquilles la lisent
   tous les deux : elle ne se règle qu'ici. */
.is-impersonating {
  --impersonation-banner-height: 32px;
}

.impersonation-banner {
  height: var(--impersonation-banner-height);
  min-height: var(--impersonation-banner-height);
}

.is-impersonating .app-shell {
  height: calc(100vh - var(--impersonation-banner-height));
  height: calc(100dvh - var(--impersonation-banner-height));
}

/* Les écrans hors coquille (connexion, tunnel d'onboarding) se centrent sur toute la hauteur
   de la fenêtre : sans cet ajustement, le bandeau les ferait déborder d'autant. */
.is-impersonating .min-vh-100 {
  min-height: calc(100vh - var(--impersonation-banner-height)) !important;
}

/* Un élément fixé en haut de fenêtre ignore le flux et passerait donc sous le bandeau — c'est
   le cas du logo du tunnel d'onboarding. On le descend d'autant. */
.is-impersonating .position-fixed.top-0 {
  top: var(--impersonation-banner-height) !important;
}

/* Utilitaire absent de Bootstrap : sans min-width:0, un élément flex refuse de
   rétrécir sous la largeur de son contenu et .text-truncate reste sans effet. */
.min-w-0 { min-width: 0 !important; }

/* Depuis Font Awesome 7, chaque icône porte une largeur fixe (--fa-width, 1.25em). Passée en
   bloc, elle ne s'étend donc plus à son conteneur et `text-align: center` ne la centre plus :
   elle reste collée à gauche, ce qui déséquilibre tous les états vides. On lui rend une largeur
   automatique dès qu'elle est explicitement mise en bloc, sans avoir à ajouter `.fa-width-auto`
   sur chaque icône. */
.fa-solid.d-block,
.fa-regular.d-block,
.fa-brands.d-block {
  --fa-width: auto;
}

/* --------------------------------------------------------------------------
   Sélecteur mensuel / annuel du catalogue des plans (14.1) : la pilule de la landing page,
   reprise à l'identique pour que le marchand retrouve ce qu'il a vu avant de s'inscrire.
   -------------------------------------------------------------------------- */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
}
.billing-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  background: transparent;
  border: none;
  border-radius: 999px;
  transition: all 0.2s;
}
.billing-opt[aria-pressed="true"] {
  color: #fff;
  background: var(--bs-emphasis-color);
}
.billing-opt .billing-tag {
  padding: 0.15rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
  border-radius: 999px;
}
.billing-opt[aria-pressed="true"] .billing-tag {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}