/* ==========================================================================
   Polices Fint
   Ce repo est autonome : il embarque ses propres declarations de police,
   au lieu de dependre de la feuille globale du site marketing.
   ========================================================================== */

@font-face {
  font-family: Ppmori;
  src: url('/fonts/PPMori-Extralight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Ppmori;
  src: url('/fonts/PPMori-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Ppmori;
  src: url('/fonts/PPMori-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Centre d'aide help.fint.fr
   Tokens et gabarits relevés sur support.ramp.com, rendus en PPMori.
   ========================================================================== */

:root {
  --help-text: #1a1919;
  --help-text-soft: #6e6a68;
  --help-bg: #ffffff;
  /* Charte Fint : la surface secondaire est #FAFAFA, pas le beige de la
     référence. */
  --help-sidebar-bg: #fafafa;
  /* Charte Fint : toutes les bordures des blocs blancs ou gris sont #E0E0E0.
     La référence distinguait le bord des cartes de celui des champs ; la
     charte n'a qu'une seule valeur, on s'aligne dessus. */
  --help-rule: #e0e0e0;
  --help-field-border: #e0e0e0;
  /* Le pill actif doit rester lisible sur #FAFAFA, plus clair que le beige
     de la référence : on prend le gris 200 de l'échelle Geist. */
  --help-pill: #ebebeb;
  /* Vert clé Fint, pour les icônes décoratives. */
  --help-accent: #72e3ad;
  --help-toc-w: 216px;
  --help-main-pad: 56px;
}

*, *::before, *::after { box-sizing: border-box; }

.help-body {
  margin: 0;
  background: var(--help-bg);
  color: var(--help-text);
  font-family: Ppmori, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 24px;
  /* La référence de design mesure le corps en graisse 300. PPMori n'existe
     qu'en 200, 400 et 600 : une demande de 300 retombe sur l'Extralight, ce
     qui a été vérifié en mesurant la largeur rendue d'un même texte, identique
     en 200 et en 300. À 16px sur fond blanc l'Extralight est trop fin pour de
     la documentation, on prend donc le Regular. C'est le seul endroit où la
     police de la marque empêche de reproduire la référence exactement. */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.help-no-scroll { overflow: hidden; }

/* ----- Structure ----- */
/* La barre latérale est fluide : 15vw bornée entre 208 et 256, exactement
   comme chez Ramp. Une largeur fixe donnerait un décalage visible au-delà
   de 1400 px de fenêtre. */
.help-shell { display: flex; min-height: 100%; position: relative; }
.help-main { flex: 1 0 0; width: 100%; min-width: 0; padding: 40px var(--help-main-pad) 96px; }

/* ----- Sidebar ----- */
.help-topbar { display: none; }
.help-sidebar-wrap {
  position: sticky;
  top: 0;
  z-index: 512;
  width: 15vw;
  min-width: 208px;
  max-width: 256px;
  height: 100vh;
  background: var(--help-sidebar-bg);
  border-right: 1px solid var(--help-rule);
  overflow-y: auto;
  transition: min-width 0.14s, width 0.14s, max-width 0.14s, transform 0.14s;
}
.help-sidebar { display: flex; flex-direction: column; min-height: 100%; padding: 16px 8px 12px; }
.help-sidebar-logo { display: block; margin: 0 0 16px 8px; }
.help-sidebar-back,
.help-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 8px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--help-text-soft);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.help-sidebar-secondary {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--help-text-soft);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.help-sidebar-back { color: var(--help-text); }
.help-sidebar-back:hover,
.help-sidebar-item:hover,
.help-sidebar-secondary:hover { background: var(--help-pill); color: var(--help-text); }
.help-sidebar-item.is-active { background: var(--help-pill); color: var(--help-text); }
/* Separateur entre le lien de retour et le libelle de section, mesure sur
   support.ramp.com/cards/use-cards : 8px avant, 1px de filet, 16px apres
   (valeurs post-collapse de la reference, posees explicitement ici car notre
   barre laterale est en flex et ne fait pas collapser les marges comme le
   flux bloc de la reference). Marges horizontales negatives pour deborder du
   padding 8px de .help-sidebar et filer bord a bord, comme chez Ramp ou le
   filet n'est pas retenu par le padding de la liste. */
.help-sidebar-separator {
  height: 1px;
  margin: 8px -8px 16px;
  border: 0;
  background: var(--help-rule);
}
.help-sidebar-label {
  margin: 8px 0 4px;
  padding: 0 8px;
  font-size: 10.4px;
  line-height: 20px;
  /* Mesuré en 300 sur la référence, rendu en 400 pour la même raison que le
     corps : à 10.4px l'Extralight de PPMori serait illisible. */
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--help-text-soft);
}
/* Le separateur porte deja les 16px d'ecart avant le libelle : sans cette
   regle, le margin-top:8px par defaut du libelle s'ajouterait par-dessus
   (16+8=24) puisque .help-sidebar est en flex et ne fait pas collapser les
   marges comme le ferait un flux bloc normal. */
.help-sidebar-separator + .help-sidebar-label { margin-top: 0; }
.help-sidebar-list { list-style: none; margin: 0; padding: 0; }
.help-sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--help-rule);
}

/* ----- Recherche sidebar, au design de l'application -----
   Valeurs reprises telles quelles de src/components/layout/UserLayout.jsx
   dans l'application Fint, pas des tokens --help-* du centre d'aide : ce
   bouton doit rester le même composant, à l'identique, aux yeux de
   l'utilisateur qui passe de l'un à l'autre. */
.help-search-app {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: text;
}
.help-search-app-bg {
  position: absolute;
  inset: 0;
  background: #ffffff;
  /* rgba(0,0,0,0.102) = --ds-gray-alpha-300 (#0000001a) de l'app, en valeur
     litterale : 26/255, pas l'arrondi a 0.1 pose avant verification. */
  outline: 1px solid rgba(0, 0, 0, 0.102);
  border-radius: 6px;
}
.help-search-app-icon {
  display: grid;
  place-content: center;
  width: 36px;
  height: 36px;
  padding-left: 4px;
  color: #666666;
}
.help-search-app-label {
  flex: 1;
  padding-left: 2px;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  color: #7d7d7d;
}
.help-search-app-key {
  display: grid;
  place-content: center;
  width: 36px;
  height: 36px;
}
.help-search-app-key kbd {
  padding: 0 4px;
  border-radius: 4px;
  background: #ffffff;
  font-family: monospace;
  font-size: 12px;
  line-height: 20.4px;
  color: #171717;
}

/* ----- Titres ----- */
.help-h1 {
  margin: 0 0 8px;
  font-size: 56px;
  line-height: 56px;
  font-weight: 400;
  letter-spacing: -1.12px;
}
.help-eyebrow { margin: 0 0 8px; font-size: 16px; line-height: 24px; color: var(--help-text-soft); }
.help-subtitle { margin: 0 0 24px; font-size: 16px; line-height: 24px; color: var(--help-text-soft); max-width: 640px; }
.help-rule { height: 1px; margin: 40px 0 32px; background: var(--help-rule); border: 0; }

/* ----- Fil d'ariane -----
   Poids 400, comme le reste de la navigation : la référence de design mesure
   14px/20px/400 pour « Navigation, fil d'ariane, sommaire », groupe qui
   englobe aussi la sidebar (déjà en 400 ci-dessus) et le sommaire
   d'article. Sans cette déclaration, le fil hériterait du poids 300 du corps. */
.help-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; line-height: 20px; font-weight: 400; }
.help-breadcrumb a { color: var(--help-text-soft); text-decoration: underline; }
.help-breadcrumb a:hover { color: var(--help-text); }
.help-breadcrumb-current { color: var(--help-text-soft); }
.help-breadcrumb-sep { color: var(--help-text-soft); }

/* ----- Recherche et CTA -----
   Rayon Geist (6px), comme les cartes de ressources : la charte Fint aligne
   les champs sur la même échelle de rayon, là où la référence les mettait à
   angles droits pour les distinguer des cartes en rayon 4. */
.help-actions { display: flex; flex-direction: column; gap: 16px; width: 512px; max-width: 100%; margin-bottom: 8px; }
.help-search-trigger,
.help-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  border: 1px solid var(--help-field-border);
  border-radius: 6px;
  background: var(--help-bg);
  color: var(--help-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.help-search-trigger:hover, .help-cta:hover { border-color: var(--help-text-soft); }
.help-search-placeholder { flex: 1; color: var(--help-text-soft); }
.help-kbd { display: inline-flex; gap: 4px; }
.help-kbd kbd {
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--help-pill);
  font-family: inherit;
  font-size: 11.2px;
  font-weight: 400;
  line-height: 16px;
  color: var(--help-text);
  text-align: center;
}
.help-cta-label { flex: 1; }

/* ----- Accueil ----- */
.help-resources { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-bottom: 12px; }
.help-resource {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--help-rule);
  border-radius: 6px;
  text-decoration: none;
  color: var(--help-text);
  transition: border-color 0.15s;
}
.help-resource:hover { border-color: var(--help-text-soft); }
.help-resource-title { display: block; font-size: 16px; line-height: 24px; }
.help-resource-desc { display: block; font-size: 16px; line-height: 24px; color: var(--help-text-soft); }
.help-section-title { margin: 0 0 16px; padding-top: 12px; font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -0.4px; }

/* Le retrait de 48px correspond à la gouttière de la colonne d'icône. */
.help-topic-block { padding: 16px 0 0; border-top: 1px solid var(--help-rule); }
.help-topic-head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 16px; }
.help-topic-name { margin: 0; padding-top: 12px; font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -0.4px; }
.help-topic-name a { color: var(--help-text); text-decoration: underline; }
.help-topic-desc { margin: 0 0 16px 48px; color: var(--help-text-soft); }
.help-link-list { list-style: none; margin: 0 0 0 48px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.help-link-list a {
  color: var(--help-text);
  text-decoration: underline;
  font-size: 14px;
  line-height: 20px;
}
.help-link-list a:hover { color: var(--help-text-soft); }

/* Icônes décoratives en vert clé Fint. Ne concerne que les icônes de rubrique
   et de carte de ressource : celles de la navigation, du fil d'ariane et des
   boutons restent à la couleur du texte, ce sont des icônes fonctionnelles. */
.help-topic-head > svg,
.help-resource > svg {
  color: var(--help-accent);
  flex-shrink: 0;
}

/* ----- Bande hero de l'accueil -----
   L'image déborde le padding de la colonne principale des deux côtés pour
   filer jusqu'au bord droit de la fenêtre, comme sur le site de référence.
   Les arrêts du dégradé sont approchés : ils n'ont pas pu être mesurés. */
.help-hero {
  position: relative;
  margin: 0 calc(var(--help-main-pad) * -1) 40px;
  padding: 40px var(--help-main-pad) 48px;
  min-height: 406px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.help-hero-picture {
  /* Le <picture> ne doit rien peser dans le flux : seule l'image qu'il
     contient est positionnée, en absolu sur la bande. */
  display: contents;
}
.help-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}
.help-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--help-bg) 0%,
    var(--help-bg) 34%,
    rgba(255, 255, 255, 0) 72%
  );
}
.help-hero-content { position: relative; }

/* ----- Page rubrique : grille de sections sur deux colonnes ----- */
/* Gouttière horizontale de 64px mesurée ; l'écart vertical reste estimé,
   le site de référence n'expose qu'une seule rangée de sections. */
.help-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; }
.help-section-cell-title { margin: 0 0 16px; font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -0.4px; }
.help-section-cell-title a { color: var(--help-text); text-decoration: underline; }

/* ----- Page article ----- */
.help-article-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.help-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 6px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--help-text);
  text-decoration: underline;
  cursor: pointer;
}
.help-article-layout { display: flex; gap: 40px; align-items: flex-start; }
.help-article-body { flex: 1; min-width: 0; }
/* Largeur de ligne bornée par un clamp, pas par une valeur fixe. Le séparateur
   et les titres, eux, occupent toute la colonne. */
.help-article-body p { margin: 0 0 24px; max-width: clamp(686.25px, 75%, 720px); }
.help-article-body ul, .help-article-body ol { margin: 0 0 24px; padding-left: 24px; max-width: clamp(686.25px, 75%, 720px); }
.help-article-body li { margin-bottom: 8px; }
.help-article-body a { color: var(--help-text); text-decoration: underline; }
.help-article-body img { max-width: 100%; height: auto; border: 1px solid var(--help-rule); border-radius: 6px; }
.help-article-body blockquote {
  margin: 0 0 24px;
  padding-left: 16px;
  border-left: 2px solid var(--help-rule);
  color: var(--help-text-soft);
  max-width: clamp(686.25px, 75%, 720px);
}
.help-heading { position: relative; margin: 0; padding: 20px 0; font-weight: 400; scroll-margin-top: 24px; }
.help-heading-h2 { font-size: 28px; line-height: 32px; letter-spacing: -0.56px; }
.help-heading-h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.4px; }
.help-heading-h4 { font-size: 16px; line-height: 24px; letter-spacing: -0.32px; }
.help-anchor {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  opacity: 0;
  color: var(--help-text-soft);
  transition: opacity 0.15s;
}
.help-heading:hover .help-anchor, .help-anchor:focus-visible { opacity: 1; }

/* ----- Sommaire -----
   font-weight 400 explicite : la référence de design donne le raccourci
   `font:400 14px/20px` pour .help-toc a dans sa section Article. Sans cette
   déclaration, le lien hériterait du poids 300 du corps de .help-body. */
.help-toc { position: sticky; top: 94px; flex: 0 0 var(--help-toc-w); width: var(--help-toc-w); padding-left: 16px; }
.help-toc-list { list-style: none; margin: 0; padding: 0; }
.help-toc-list .help-toc-list { padding-left: 16px; }
.help-toc a {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--help-text-soft);
  text-decoration: underline;
}
.help-toc a:hover, .help-toc a.is-active { color: var(--help-text); }
.help-toc-mobile { display: none; }

/* ----- Mobile ----- */
@media (max-width: 900px) {
  .help-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    background: var(--help-sidebar-bg);
    border-bottom: 1px solid var(--help-rule);
  }
  .help-burger { display: inline-flex; padding: 8px; border: 0; background: none; color: var(--help-text); cursor: pointer; }
  .help-sidebar-wrap {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: 256px;
    min-width: 256px;
    max-width: 256px;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  }
  .help-sidebar-wrap.is-open { transform: translateX(0); }
  .help-sidebar-logo { display: none; }
  .help-overlay { position: fixed; inset: 0; z-index: 30; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(1px); }
  .help-main { padding: 24px 16px 64px; }
  .help-h1 { font-size: 40px; line-height: 42px; letter-spacing: -0.8px; }
  .help-hero { margin: 0 0 24px; padding: 0; min-height: 0; }
  .help-hero-image, .help-hero-veil { display: none; }
  .help-heading-h2 { font-size: 28px; line-height: 32px; }
  .help-resources, .help-section-grid { grid-template-columns: 1fr; gap: 16px; }
  .help-article-layout { flex-direction: column; gap: 0; }
  .help-toc { display: none; }
  .help-toc-mobile { display: block; margin-bottom: 32px; border: 1px solid var(--help-rule); border-radius: 6px; }
  .help-toc-mobile summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; cursor: pointer; list-style: none; }
  .help-toc-mobile summary::-webkit-details-marker { display: none; }
  .help-toc-mobile .help-toc-list { padding: 0 16px 16px; }
  .help-anchor { display: none; }
}

/* ----- Palette de recherche ----- */
/* Au-dessus de la barre latérale, qui est à 512. */
/* Cette règle doit précéder celle qui suit et la neutraliser quand l'attribut
   hidden est posé. Le display:none de l'attribut hidden vient de la feuille du
   navigateur : n'importe quelle déclaration display d'auteur le bat. Sans cette
   ligne, la palette reste affichée en permanence, plein écran, et recouvre
   tout le centre d'aide. */
.help-search-modal[hidden] { display: none; }
.help-search-modal { position: fixed; inset: 0; z-index: 600; display: flex; justify-content: center; padding-top: 12vh; }
.help-search-backdrop { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(1px); }
.help-search-panel {
  position: relative;
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px;
  background: var(--help-bg);
  border: 1px solid var(--help-rule);
  border-radius: 12px;
  /* Ombre de menu de l'échelle Geist : celle que la charte Fint réserve aux
     surfaces flottantes, à la place de l'ombre ad hoc de la référence. */
  box-shadow:
    0 0 0 1px #00000014,
    0px 1px 1px #00000005,
    0px 4px 8px -4px #0000000a,
    0px 16px 24px -8px #0000000f;
}
.help-search-panel .pagefind-ui { --pagefind-ui-primary: #1a1919; --pagefind-ui-font: inherit; --pagefind-ui-border-radius: 4px; }