/* ============================================================
   JETONS DE DESIGN — source unique des valeurs du site.
   Chargée avant buttons.css sur toutes les pages.

   Pourquoi ce fichier : au 2026-08-12, l'audit des 96 pages
   comptait 36 tailles de texte, 14 rayons, 107 couleurs, 26
   ombres et 25 transitions. Personne n'avait choisi ça, ça
   s'était déposé page après page. C'est exactement ce qui
   produit la sensation « légèrement amateur » : à l'échelle
   d'un écran tout va, à l'échelle du site rien ne concorde.

   Règle : aucune page ne redéclare une valeur. Elle prend un
   jeton. Si un jeton manque, on l'ajoute ICI.
   ============================================================ */

/* ------------------------------------------------------------
   POLICES SERVIES PAR NOUS, comme Final Draft.
   Passer par fonts.googleapis.com coûtait deux connexions à un
   tiers (DNS + TLS) avant même de pouvoir peindre un mot. Les
   fichiers font 27 ko et 40 ko, ils partent du même domaine que
   la page. Licence SIL pour les deux, l'hébergement est permis.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/jakarta-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jbmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- POLICES -------------------------------------------------
     Plus Jakarta Sans pour toute l'interface (la même que Final
     Draft, licence SIL, servie en variable 200-800).
     Le monospace ne sert plus QU'aux extraits de scénario et au
     code : c'est là qu'il veut dire quelque chose. Final Draft
     fait exactement ce partage avec sa Courier maison. */
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- ÉCHELLE TYPOGRAPHIQUE : 9 crans, plus rien d'autre -----
     16 px de corps et 19 px de sous-titre viennent de chez eux,
     pas d'un ratio choisi au hasard. */
  --t-xs:   11px;   /* étiquettes en capitales */
  --t-sm:   13px;   /* légendes, mentions */
  --t-base: 16px;   /* texte courant, valeur Final Draft */
  --t-md:   19px;   /* chapô, sous-titre de section */
  --t-lg:   22px;   /* titre de carte */
  --t-xl:   28px;   /* titre de sous-section */
  --t-2xl:  38px;   /* titre de section */
  --t-3xl:  56px;   /* titre de page intérieure */
  --t-display: 72px; /* H1 d'accueil */

  /* --- INTERLIGNES ------------------------------------------- */
  --lh-tight: 1.11;   /* titres d'affichage, valeur Final Draft */
  --lh-snug:  1.25;   /* gros chiffres, sous-titres */
  --lh-body:  1.5;    /* texte courant, valeur Final Draft */
  --lh-loose: 1.7;    /* paragraphes longs sur fond sombre */

  /* --- APPROCHE : proportionnelle, jamais en pixels fixes ----- */
  --ls-display: -0.011em;  /* relevé sur leur H1 : -0.78px / 72px */
  --ls-number:  -0.04em;   /* relevé sur leurs grands chiffres */
  --ls-label:   -0.02em;
  --ls-body:    0;
  --ls-caps:    0.14em;    /* petites capitales d'étiquette */

  /* --- GRAISSES : 4, pas plus -------------------------------- */
  --w-normal: 400;
  --w-medium: 500;
  --w-bold:   700;
  --w-black:  800;   /* réservé aux grands chiffres */

  /* --- RAYONS : 4 ------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-full: 999px;

  /* --- COULEURS : 12 ---------------------------------------- */
  --violet:      #9D7BEA;
  --violet-dark: #8B6AD4;
  --violet-soft: #F1EDFB;
  --ink:         #1A1A1A;   /* noir de fond et de texte */
  --ink-2:       #3C3C44;   /* texte fort sur clair */
  --ink-3:       #6B6B73;   /* texte secondaire sur clair */
  --ink-4:       #9A9AA2;   /* texte tertiaire, légendes */
  --paper:       #FAFAFA;   /* fond clair */
  --paper-2:     #FFFFFF;
  --cream:       #F6F0E6;   /* fond des sections chaudes */
  --line:        rgba(26,26,26,.10);
  --error-bg:    #FCECEC;   /* fond d'un message d'échec sur clair */
  --error-ink:   #8A2B2B;   /* texte d'un message d'échec */
  --line-dark:   rgba(255,255,255,.12);

  /* --- OMBRES : 3 niveaux ------------------------------------ */
  --shadow-1: 0 10px 30px rgba(26,26,26,.06);
  --shadow-2: 0 18px 44px rgba(26,26,26,.10);
  --shadow-3: 0 28px 70px rgba(0,0,0,.28);

  /* --- MOUVEMENT : 2 courbes, pas 25 ------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --fast: .18s var(--ease);
  --slow: .3s var(--ease);
}

/* ------------------------------------------------------------
   APPLICATION GLOBALE
   Cette feuille est chargée après le <style> des pages : elle
   impose la police sans avoir à réécrire 96 fichiers.
   ------------------------------------------------------------ */
body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
button, input, textarea, select,
.hero h1, .section h2, .plan-name, .plan-price {
  font-family: var(--sans);
}

/* L'approche proportionnelle, appliquée par cran de taille. */
h1 { letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
h2 { letter-spacing: var(--ls-label); }

/* Aucun mot ne finit seul sur la dernière ligne. Les titres et les
   chapôs se répartissent, les paragraphes évitent l'orphelin. C'est
   le détail qui sépare une page composée d'une page déversée. */
h1, h2, h3,
.hero-subtitle, .section-intro, .section-title, .page-title {
  text-wrap: balance;
}
p, li { text-wrap: pretty; }

/* Le coup de surligneur. Le bloc n'est pas un rectangle droit : il est
   penché ET les bords verticaux sont obliques, comme une trace de
   feutre. Le fond vit dans un pseudo-élément pour que les lettres,
   elles, restent d'aplomb. */
span.mark {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 0.06em 0.32em 0.1em;
  margin: 0 0.08em 0 0.04em;
  color: #141416;
  white-space: nowrap;
}
/* Un titre serre a 1.12 d'interligne n'a pas la place d'accueillir un
   bloc : le surlignage mordait sur la ligne du dessus. On rend la place. */
h1:has(> span.mark), h2:has(> span.mark), h3:has(> span.mark),
h1:has(span.mark), h2:has(span.mark), h3:has(span.mark) { line-height: 1.34; }

span.mark::before {
  content: "";
  position: absolute;
  inset: 0 -0.06em;
  z-index: -1;
  background: #C6AEFA;   /* sur fond clair, le violet eclairci : plein, il */
  transform: rotate(-1.6deg) skewX(-9deg);  /* ecrase le texte noir pose dessus */
}
/* Le trait se peint de gauche à droite, UNE fois, quand le bloc est
   franchement entré dans l'écran. On n'utilise pas animation-timeline:
   view() : cette ligne de temps est pilotée par la position, donc elle
   rejoue le trait à l'envers quand on remonte la page. Ici c'est un
   declencheur (voir header.js) qui pose la classe une fois pour toutes.
   Sans JavaScript, le surlignage est simplement là : on ne cache jamais
   du contenu derrière une animation. */
@keyframes mark-sweep-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.js span.mark::before { clip-path: inset(0 100% 0 0); }
.js span.mark.mark-on::before {
  animation: mark-sweep-in .9s cubic-bezier(.22, .68, .28, 1) .15s both;
}
/* Dans le hero, le texte lui-même arrive en fondu : le trait attend. */
.js .hero span.mark.mark-on::before { animation-delay: 1.2s; }

/* Sur fond sombre le rapport s'inverse : c'est le violet plein des
   boutons qui tranche, l'eclairci y paraitrait laiteux, et le texte
   passe en blanc pour rester dans la logique de la section. */
.hero span.mark::before,
.cta-section span.mark::before { background: var(--violet); }
.hero span.mark,
.cta-section span.mark { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  span.mark::before { animation: none !important; clip-path: inset(0 0 0 0); transition: none; }
}

/* Le ™ de Plus Jakarta Sans a une chasse large et s'assoit sur la
   ligne de base : dans un titre il ouvre un trou avant le point.
   On le réduit, on le remonte, on récupère la chasse. */
.tm-mark {
  font-size: .42em;
  vertical-align: .78em;
  letter-spacing: 0;
  margin-left: .02em;
  margin-right: -.34em;
}

/* ------------------------------------------------------------
   FIL D'ARIANE
   C'etait un bandeau noir pleine largeur, colle sous la pilule
   flottante : sur une page claire, ca se lit comme une deuxieme
   en-tete. Un fil d'Ariane est une mention de service, il se pose
   discretement au-dessus du contenu et s'aligne sur la gouttiere.
   ------------------------------------------------------------ */
.breadcrumb-bar {
  background: transparent;
  border-bottom: 0;
  padding: 26px 30px 0;
}
.breadcrumb-content { max-width: 1240px; margin: 0 auto; }
/* Sur les articles, la colonne de texte est etroite : le fil se cale
   dessus plutot que de partir seul a l'extreme gauche de la page. */
body:has(.article) .breadcrumb-content { max-width: 700px; }
body:has(.page-content) .breadcrumb-content { max-width: 1080px; }
/* Deux ecritures de fil d'Ariane coexistent : liens directs dans
   .breadcrumb-content, ou emballes dans un .breadcrumb. Les deux. */
.breadcrumb-bar, .breadcrumb-bar * { font-size: 13px; color: var(--ink-4); }
.breadcrumb-bar a { color: var(--ink-3); text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--violet); }
/* la page courante etait en blanc, heritee du bandeau noir */
.breadcrumb-bar .current, .breadcrumb-bar .breadcrumb-content > span:last-child { color: var(--ink-2); }

/* Le monospace reste là où il porte du sens : extraits de
   scénario, exemples de code, mock du produit. */
code, pre, kbd, samp,
.script-example, .script-body, .doc-mock, .mock, .sweep,
[class*="script-"], [class*="-script"], [class*="mono"] {
  font-family: var(--mono);
}

/* Interdit désormais : animer « all ». Ça anime aussi la mise en
   page et donne ces survols mous. On garde la courbe commune. */
a, button, .card, .info-card, .feature-card, .plan, .step, .review-card {
  transition-timing-function: var(--ease);
}