.elementor-kit-5{--e-global-color-primary:var(--sb-orange);--e-global-color-secondary:var(--sb-text-primary);--e-global-color-text:var(--sb-text-primary);--e-global-color-accent:var(--sb-orange-ink);--e-global-color-fondpage:var(--sb-bg-page);--e-global-color-fondsurf:var(--sb-bg-surface);--e-global-color-carte:var(--sb-bg-card-elevated);--e-global-color-encrefond:var(--sb-bg-ink);--e-global-color-txt2:var(--sb-text-secondary);--e-global-color-txtinv:var(--sb-text-invert);--e-global-color-orvif:var(--sb-orange-bright);--e-global-color-orprof:var(--sb-orange-deep);--e-global-color-bleu:var(--sb-blue);--e-global-color-bleuink:var(--sb-blue-ink);--e-global-color-succes:var(--sb-success-ink);--e-global-color-alerte:var(--sb-danger-ink);--e-global-color-bordure:var(--sb-border-medium);--e-global-color-bordinput:var(--sb-border-input);--e-global-typography-primary-font-family:"Days One";--e-global-typography-primary-font-size:var(--sb-text-4xl);--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:var(--sb-leading-tight);--e-global-typography-primary-letter-spacing:var(--sb-tracking-title);--e-global-typography-secondary-font-family:"Rethink Sans";--e-global-typography-secondary-font-size:var(--sb-text-2xl);--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:var(--sb-leading-snug);--e-global-typography-secondary-letter-spacing:var(--sb-tracking-title);--e-global-typography-text-font-family:"Rethink Sans";--e-global-typography-text-font-size:var(--sb-text-base);--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:var(--sb-leading-normal);--e-global-typography-text-letter-spacing:var(--sb-tracking-normal);--e-global-typography-accent-font-family:"JetBrains Mono";--e-global-typography-accent-font-size:var(--sb-text-2xs);--e-global-typography-accent-font-weight:700;--e-global-typography-accent-line-height:var(--sb-leading-normal);--e-global-typography-accent-letter-spacing:var(--sb-tracking-label);}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   STATBALLER — DESIGN SYSTEM
   v1.1 · Thème clair unique · Préfixe sb- (anti-collision Elementor/thème)
   Contrastes vérifiés WCAG 2.1 AA. Voir GUIDE-ELEMENTOR.md pour l'install.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. POLICES
   Days One, Rethink Sans et JetBrains Mono sont chargees par Elementor, depuis
   les Polices globales du kit (Reglages du site -> Design System). Ce sont les
   memes familles que les tokens --sb-font-* ci-dessous : Elementor a besoin du
   nom de famille en clair pour savoir quoi charger, le reste du systeme passe
   par les tokens.

   Grifter Bold est une police commerciale. Le @font-face qui la declarait
   pointait sur un fichier absent : la requete echouait a chaque chargement de
   page. Il est retire. Days One tient le role de la police de titre, meme
   famille de formes. Pour remettre Grifter :
     1. deposer grifter-bold.woff2 dans /wp-content/uploads/fonts/
     2. Elementor -> Custom Fonts -> Ajouter, famille "Grifter", graisse 700
     3. Reglages du site -> Design System -> Polices globales -> Titres -> Grifter
   Le token --sb-font-title la nomme deja en premier, rien d'autre a changer.
   -------------------------------------------------------------------------- */

:root {
  /* ------------------------------------------------------------------------
     2. COULEURS — FONDS
     ------------------------------------------------------------------------ */
  --sb-bg-page:            #ece6da;
  --sb-bg-surface:         #f5f1e9;
  --sb-bg-card-flat:       #faf8f3;
  --sb-bg-card-elevated:   #ffffff;
  --sb-bg-card:            linear-gradient(160deg, #ffffff 0%, #faf7f1 100%);
  --sb-bg-pill-inactive:   rgba(28, 22, 16, 0.04);
  --sb-bg-pill-hover:      rgba(28, 22, 16, 0.07);
  --sb-bg-ink:             #1a1714;
  --sb-bg-ink-hover:       #2b2621;

  /* COULEURS — TEXTE
     text-secondary relevé de 0.58 → 0.64 : à 0.58 le ratio tombait à 3,98:1
     sur --sb-bg-page (échec AA). À 0.64 : 4,80:1 page / 5,97:1 blanc. */
  --sb-text-primary:       #1c1a17;
  --sb-text-secondary:     rgba(28, 26, 23, 0.64);
  --sb-text-tertiary:      rgba(28, 26, 23, 0.38); /* DÉCORATIF UNIQUEMENT — 2,3:1 */
  --sb-text-invert:        #faf8f3;
  --sb-text-label:         rgba(28, 26, 23, 0.64); /* labels uppercase = du texte */

  /* COULEURS — BORDURES
     Les 3 premières sont décoratives (séparateurs). border-input atteint 3:1,
     seuil requis pour un composant d'interface identifiable. */
  --sb-border-subtle:      rgba(30, 24, 18, 0.07);
  --sb-border-medium:      rgba(30, 24, 18, 0.11);
  --sb-border-strong:      rgba(30, 24, 18, 0.18);
  --sb-border-input:       rgba(30, 24, 18, 0.48);
  --sb-border-focus:       #c64a1f;

  /* MARQUE — ORANGE BASKET */
  --sb-orange-bright:      #ff8a4c;
  --sb-orange:             #f2621f;
  --sb-orange-deep:        #c64a1f;
  --sb-orange-ink:         #b6410b; /* AJOUT : orange lisible en TEXTE — 4,51:1 page */
  --sb-orange-glow:        rgba(242, 98, 31, 0.35);
  --sb-orange-glow-soft:   rgba(242, 98, 31, 0.12);

  /* SECONDAIRE — BLEU PERVENCHE */
  --sb-blue-bright:        #8b98f5;
  --sb-blue:               #6d7cf0;
  --sb-blue-deep:          #4c5bd4;
  --sb-blue-ink:           #4255ec; /* AJOUT : bleu lisible en TEXTE — 4,52:1 page */
  --sb-blue-glow-soft:     rgba(109, 124, 240, 0.12);

  /* SÉMANTIQUES
     Les tokens -ink sont obligatoires dès que la couleur porte du texte. */
  --sb-success:            #1f9d5c;
  --sb-success-bg:         rgba(31, 157, 92, 0.12);
  --sb-success-ink:        #177645;
  --sb-danger:             #e0484d;
  --sb-danger-bg:          rgba(224, 72, 77, 0.12);
  --sb-danger-ink:         #c92227;
  --sb-warning:            #d98724;
  --sb-warning-bg:         rgba(217, 135, 36, 0.14);
  --sb-warning-ink:        #935b18;
  --sb-neutral-bg:         rgba(28, 26, 23, 0.07);

  /* GRADIENTS */
  --sb-gradient-hero:      linear-gradient(118deg, #ff9147 0%, #f2621f 46%, #8b7bf0 100%);
  --sb-gradient-orange:    radial-gradient(120% 120% at 20% 0%, #ff8a4c 0%, #c64a1f 100%);
  --sb-gradient-btn:       linear-gradient(180deg, #ff5f0f 0%, #f2621f 55%, #e05513 100%); /* borne haute remontee de #ff7a38 : le blanc y tombait a 2,59:1 */
  --sb-scrim-hero:         linear-gradient(100deg, rgba(26,23,20,.56) 0%, rgba(26,23,20,.52) 55%, rgba(26,23,20,.34) 82%, rgba(26,23,20,.24) 100%);
  --sb-bg-halos:
    radial-gradient(48rem 30rem at 12% -8%,  rgba(242, 98, 31, 0.13), transparent 62%),
    radial-gradient(42rem 28rem at 92% 4%,   rgba(109, 124, 240, 0.11), transparent 60%),
    radial-gradient(38rem 26rem at 62% 96%,  rgba(217, 135, 36, 0.10), transparent 64%);

  /* ------------------------------------------------------------------------
     3. TYPOGRAPHIE
     ------------------------------------------------------------------------ */
  --sb-font-body:  'Rethink Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sb-font-title: 'Grifter', 'Rethink Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sb-font-stat:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sb-text-2xs:  0.625rem;  /* 10px */
  --sb-text-xs:   0.6875rem; /* 11px */
  --sb-text-sm:   0.75rem;   /* 12px */
  --sb-text-base: 0.8125rem; /* 13px — corps par défaut */
  --sb-text-md:   0.875rem;  /* 14px */
  --sb-text-lg:   1rem;      /* 16px */
  --sb-text-xl:   1.125rem;  /* 18px */
  --sb-text-2xl:  1.3125rem; /* 21px */
  --sb-text-3xl:  1.5625rem; /* 25px */
  --sb-text-4xl:  2rem;      /* 32px */
  --sb-text-5xl:  2.625rem;  /* 42px */
  --sb-text-6xl:  3.5rem;    /* 56px */

  --sb-weight-regular: 400;
  --sb-weight-medium:  500;
  --sb-weight-semi:    600;
  --sb-weight-bold:    700;
  --sb-weight-black:   800;

  --sb-leading-display: 1.02;
  --sb-leading-tight:   1.15;
  --sb-leading-snug:    1.3;
  --sb-leading-normal:  1.55;
  --sb-leading-relaxed: 1.7;

  --sb-tracking-display: -0.03em;
  --sb-tracking-title:   -0.02em;
  --sb-tracking-stat:    -0.02em;
  --sb-tracking-normal:   0em;
  --sb-tracking-label:    0.08em;

  --sb-measure: 65ch;

  /* ------------------------------------------------------------------------
     4. ESPACEMENTS — base 4px
     ------------------------------------------------------------------------ */
  --sb-space-0:  0;
  --sb-space-1:  0.25rem;  /*  4px */
  --sb-space-2:  0.5rem;   /*  8px */
  --sb-space-3:  0.75rem;  /* 12px */
  --sb-space-4:  1rem;     /* 16px */
  --sb-space-5:  1.25rem;  /* 20px */
  --sb-space-6:  1.5rem;   /* 24px */
  --sb-space-8:  2rem;     /* 32px */
  --sb-space-10: 2.5rem;   /* 40px */
  --sb-space-12: 3rem;     /* 48px */
  --sb-space-16: 4rem;     /* 64px */
  --sb-space-20: 5rem;     /* 80px */
  --sb-space-24: 6rem;     /* 96px */

  /* 5. RAYONS */
  --sb-radius-xs:   4px;
  --sb-radius-sm:   6px;
  --sb-radius-md:   10px;
  --sb-radius-lg:   14px;
  --sb-radius-xl:   20px;
  --sb-radius-2xl:  28px;
  /* v1.1 : un pave a l'echelle de la page ne peut pas prendre le meme rayon
     que les cartes qu'il contient, sinon la hierarchie des formes disparait. */
  --sb-radius-3xl:  40px;
  --sb-radius-pill: 999px;

  /* 6. OMBRES — teintées chaud (jamais de noir pur sur fond crème) */
  --sb-shadow-xs: 0 1px 2px rgba(28, 22, 16, 0.05);
  --sb-shadow-sm: 0 1px 3px rgba(28, 22, 16, 0.06), 0 1px 2px rgba(28, 22, 16, 0.04);
  --sb-shadow-md: 0 4px 12px -2px rgba(28, 22, 16, 0.08), 0 2px 4px -2px rgba(28, 22, 16, 0.05);
  --sb-shadow-lg: 0 12px 28px -6px rgba(28, 22, 16, 0.12), 0 4px 10px -4px rgba(28, 22, 16, 0.06);
  --sb-shadow-xl: 0 24px 56px -12px rgba(28, 22, 16, 0.18), 0 8px 20px -8px rgba(28, 22, 16, 0.08);
  --sb-shadow-glow: 0 8px 24px -8px var(--sb-orange-glow);
  --sb-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* 7. MOTION */
  --sb-duration-instant: 80ms;
  --sb-duration-fast:    140ms;
  --sb-duration-base:    200ms;
  --sb-duration-slow:    320ms;
  --sb-duration-slower:  480ms;
  --sb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sb-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --sb-ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --sb-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 8. Z-INDEX */
  --sb-z-base: 0;
  --sb-z-dropdown: 100;
  --sb-z-sticky: 200;
  --sb-z-header: 300;
  --sb-z-overlay: 400;
  --sb-z-modal: 500;
  --sb-z-toast: 600;
  --sb-z-tooltip: 700;

  /* 9. DATA-VIZ — séries catégorielles, toutes ≥3:1 sur carte blanche/flat */
  --sb-viz-1: #f2621f; /* orange marque */
  --sb-viz-2: #4c5bd4; /* bleu profond */
  --sb-viz-3: #177645; /* vert */
  --sb-viz-4: #a8701a; /* ambre */
  --sb-viz-5: #8a4f9e; /* prune */
  --sb-viz-6: #0f7c86; /* sarcelle */
  --sb-viz-7: #a4462c; /* terre */
  --sb-viz-8: #5d6470; /* ardoise */
  --sb-viz-grid: rgba(30, 24, 18, 0.09);
  --sb-viz-axis: rgba(30, 24, 18, 0.28);

  /* Shot chart — échelle séquentielle (efficacité de zone, froid → chaud) */
  --sb-heat-1: #e8e1d4;
  --sb-heat-2: #f7ceb0;
  --sb-heat-3: #ff9a63;
  --sb-heat-4: #f2621f;
  --sb-heat-5: #b6410b;
  /* Échelle divergente (écart à la moyenne : sous ← neutre → sur) */
  --sb-div-neg-3: #4c5bd4;
  --sb-div-neg-2: #8b98f5;
  --sb-div-neg-1: #cfd3e8;
  --sb-div-zero:  #e8e1d4;
  --sb-div-pos-1: #ffb489;
  --sb-div-pos-2: #f2621f;
  --sb-div-pos-3: #a5350c;

  /* 10. DIVERS */
  --sb-container: 1200px;
  --sb-container-narrow: 760px;
  --sb-header-height: 64px;
  --sb-focus-width: 2px;
  --sb-focus-offset: 2px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
.sb-scope,
body.sb-scope {
  background-color: var(--sb-bg-page);
  background-image: var(--sb-bg-halos);
  background-attachment: fixed;
  color: var(--sb-text-primary);
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-base);
  line-height: var(--sb-leading-normal);
  font-weight: var(--sb-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Focus visible — anneau double : orange-deep (3,84:1) + halo clair de séparation */
.sb-scope :focus-visible,
.sb-btn:focus-visible,
.sb-pill:focus-visible,
.sb-input:focus-visible,
.sb-tab:focus-visible {
  outline: var(--sb-focus-width) solid var(--sb-border-focus);
  outline-offset: var(--sb-focus-offset);
  box-shadow: 0 0 0 calc(var(--sb-focus-offset) + var(--sb-focus-width)) rgba(255, 255, 255, 0.9);
}

.sb-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sb-scope *,
  .sb-scope *::before,
  .sb-scope *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */
.sb-scope h1, .sb-scope h2, .sb-scope h3,
.sb-scope h4, .sb-scope h5, .sb-scope h6,
.sb-title, .font-title, .font-display {
  font-family: var(--sb-font-title);
  font-weight: var(--sb-weight-bold);
  letter-spacing: var(--sb-tracking-title);
  line-height: var(--sb-leading-tight);
  color: var(--sb-text-primary);
  text-wrap: balance;
  margin: 0;
}

.sb-display {
  font-family: var(--sb-font-title);
  font-size: var(--sb-text-6xl);
  line-height: var(--sb-leading-display);
  letter-spacing: var(--sb-tracking-display);
  font-weight: var(--sb-weight-bold);
}

.sb-h1 { font-size: var(--sb-text-5xl); }
.sb-h2 { font-size: var(--sb-text-4xl); }
.sb-h3 { font-size: var(--sb-text-3xl); }
.sb-h4 { font-size: var(--sb-text-2xl); }
.sb-h5 { font-size: var(--sb-text-xl); }
.sb-h6 { font-size: var(--sb-text-lg); }

.sb-body      { font-size: var(--sb-text-base); line-height: var(--sb-leading-normal); }
.sb-body-lg   { font-size: var(--sb-text-md);   line-height: var(--sb-leading-normal); }
.sb-prose     { max-width: var(--sb-measure); line-height: var(--sb-leading-relaxed); }
.sb-lead      { font-size: var(--sb-text-lg); line-height: var(--sb-leading-snug); color: var(--sb-text-secondary); max-width: var(--sb-measure); }
.sb-caption   { font-size: var(--sb-text-sm); color: var(--sb-text-secondary); }

.sb-label {
  font-size: var(--sb-text-2xs);
  font-weight: var(--sb-weight-semi);
  letter-spacing: var(--sb-tracking-label);
  text-transform: uppercase;
  color: var(--sb-text-label);
  line-height: 1.4;
}

/* Chiffres : mono + chasse tabulaire, indispensable pour aligner des colonnes */
.sb-stat, .font-stat, .font-mono {
  font-family: var(--sb-font-stat);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: var(--sb-tracking-stat);
}

.sb-text-secondary { color: var(--sb-text-secondary); }
.sb-text-tertiary  { color: var(--sb-text-tertiary); }   /* décoratif uniquement */
.sb-text-orange    { color: var(--sb-orange-ink); }      /* jamais --sb-orange en texte */
.sb-text-blue      { color: var(--sb-blue-ink); }
.sb-text-success   { color: var(--sb-success-ink); }
.sb-text-danger    { color: var(--sb-danger-ink); }
.sb-text-warning   { color: var(--sb-warning-ink); }

/* Texte en gradient : réservé aux chiffres display ≥36px/700.
   Le gradient ne satisfait pas le contraste texte → doubler la valeur
   en texte accessible (aria-label ou libellé adjacent). */
.sb-text-gradient {
  background: var(--sb-gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: var(--sb-text-5xl);
  font-weight: var(--sb-weight-black);
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sb-space-2);
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-md);
  font-weight: var(--sb-weight-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 0 var(--sb-space-5);
  min-height: 40px;
  min-width: 40px;
  border: 1px solid transparent;
  border-radius: var(--sb-radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--sb-duration-fast) var(--sb-ease-standard),
    box-shadow var(--sb-duration-base) var(--sb-ease-standard),
    transform var(--sb-duration-fast) var(--sb-ease-standard),
    border-color var(--sb-duration-fast) var(--sb-ease-standard);
}
.sb-btn:active { transform: translateY(1px); }
.sb-btn:disabled, .sb-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Primaire — texte blanc sur orange = 3,02:1 → conforme AA seulement en
   ≥14px/700. La taille sm passe donc sur orange-deep (4,50:1). */
.sb-btn-primary {
  background: var(--sb-gradient-btn);
  color: #ffffff;
  box-shadow: var(--sb-shadow-glow), var(--sb-shadow-inset);
}
.sb-btn-primary:hover { background: var(--sb-orange-deep); box-shadow: 0 10px 28px -8px var(--sb-orange-glow); }
.sb-btn-primary:active { background: #ad3f14; }

.sb-btn-secondary {
  background: var(--sb-bg-card-elevated);
  color: var(--sb-text-primary);
  border-color: var(--sb-border-strong);
  box-shadow: var(--sb-shadow-xs);
}
.sb-btn-secondary:hover { border-color: var(--sb-border-input); background: #fffdfa; }

.sb-btn-ink { background: var(--sb-bg-ink); color: var(--sb-text-invert); }
.sb-btn-ink:hover { background: var(--sb-bg-ink-hover); }

.sb-btn-ghost { background: transparent; color: var(--sb-text-primary); }
.sb-btn-ghost:hover { background: var(--sb-bg-pill-hover); }

.sb-btn-danger { background: var(--sb-danger-ink); color: #ffffff; }
.sb-btn-danger:hover { background: #a91b20; }

.sb-btn-sm { min-height: 32px; padding: 0 var(--sb-space-4); font-size: var(--sb-text-sm); }
.sb-btn-sm.sb-btn-primary { background: var(--sb-orange-deep); box-shadow: var(--sb-shadow-xs); }
.sb-btn-lg { min-height: 48px; padding: 0 var(--sb-space-8); font-size: var(--sb-text-lg); }
.sb-btn-block { display: flex; width: 100%; }
.sb-btn-icon { padding: 0; width: 40px; }

/* État chargement — le lecteur d'écran a besoin de aria-busy="true" */
.sb-btn-loading { color: transparent !important; pointer-events: none; position: relative; }
.sb-btn-loading::after {
  content: ''; position: absolute; width: 15px; height: 15px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: #ffffff; animation: sb-spin 640ms linear infinite;
}
.sb-btn-secondary.sb-btn-loading::after, .sb-btn-ghost.sb-btn-loading::after { color: var(--sb-text-primary); }
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   PILLS / FILTRES
   ========================================================================== */
.sb-pill {
  display: inline-flex; align-items: center; gap: var(--sb-space-2);
  min-height: 32px; padding: 0 var(--sb-space-4);
  background: var(--sb-bg-pill-inactive);
  color: var(--sb-text-primary);
  font-size: var(--sb-text-sm);
  font-weight: var(--sb-weight-semi);
  border: 1px solid transparent;
  border-radius: var(--sb-radius-pill);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--sb-duration-fast) var(--sb-ease-standard),
              color var(--sb-duration-fast) var(--sb-ease-standard);
}
.sb-pill:hover { background: var(--sb-bg-pill-hover); }
.sb-pill[aria-selected="true"], .sb-pill.is-active {
  background: var(--sb-bg-ink); color: var(--sb-text-invert);
}
.sb-pill-orange[aria-selected="true"], .sb-pill-orange.is-active {
  background: var(--sb-orange-deep); color: #ffffff;
}
.sb-pill-count {
  font-family: var(--sb-font-stat); font-size: var(--sb-text-2xs);
  padding: 1px 6px; border-radius: var(--sb-radius-pill);
  background: rgba(28, 26, 23, 0.09);
}
.sb-pill.is-active .sb-pill-count { background: rgba(255, 255, 255, 0.22); }
.sb-pill-group { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); }

/* ==========================================================================
   CARTES
   ========================================================================== */
.sb-card {
  background: var(--sb-bg-card);
  border: 1px solid var(--sb-border-subtle);
  border-radius: var(--sb-radius-lg);
  padding: var(--sb-space-6);
  box-shadow: var(--sb-shadow-sm);
}
.sb-card-flat { background: var(--sb-bg-card-flat); box-shadow: none; border-color: var(--sb-border-medium); }
.sb-card-elevated { background: var(--sb-bg-card-elevated); box-shadow: var(--sb-shadow-lg); border-color: transparent; }
.sb-card-interactive { cursor: pointer; transition: transform var(--sb-duration-base) var(--sb-ease-entrance), box-shadow var(--sb-duration-base) var(--sb-ease-entrance); }
.sb-card-interactive:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-lg); }
.sb-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sb-space-4); margin-bottom: var(--sb-space-4); }
.sb-card-title { font-family: var(--sb-font-title); font-size: var(--sb-text-lg); letter-spacing: var(--sb-tracking-title); }
.sb-card-grid { display: grid; gap: var(--sb-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ==========================================================================
   BADGES
   ========================================================================== */
.sb-badge {
  display: inline-flex; align-items: center; gap: var(--sb-space-1);
  padding: 3px var(--sb-space-2);
  font-size: var(--sb-text-2xs); font-weight: var(--sb-weight-bold);
  letter-spacing: var(--sb-tracking-label); text-transform: uppercase;
  border-radius: var(--sb-radius-xs); white-space: nowrap;
}
.sb-badge-success { background: var(--sb-success-bg); color: var(--sb-success-ink); }
.sb-badge-danger  { background: var(--sb-danger-bg);  color: var(--sb-danger-ink); }
.sb-badge-warning { background: var(--sb-warning-bg); color: var(--sb-warning-ink); }
.sb-badge-orange  { background: var(--sb-orange-glow-soft); color: var(--sb-orange-ink); }
.sb-badge-blue    { background: var(--sb-blue-glow-soft);   color: var(--sb-blue-ink); }
.sb-badge-neutral { background: var(--sb-neutral-bg); color: var(--sb-text-primary); }
.sb-badge-solid   { background: var(--sb-bg-ink); color: var(--sb-text-invert); }

/* Delta — la flèche double la couleur : jamais l'information par la couleur seule */
.sb-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--sb-font-stat); font-size: var(--sb-text-sm); font-weight: var(--sb-weight-bold); }
.sb-delta-up::before   { content: '▲'; font-size: 0.7em; }
.sb-delta-down::before { content: '▼'; font-size: 0.7em; }
.sb-delta-flat::before { content: '–'; }
.sb-delta-up   { color: var(--sb-success-ink); }
.sb-delta-down { color: var(--sb-danger-ink); }
.sb-delta-flat { color: var(--sb-text-secondary); }

/* ==========================================================================
   STAT BLOCK & KPI HERO
   ========================================================================== */
.sb-stat-block { display: flex; flex-direction: column; gap: var(--sb-space-1); }
.sb-stat-label { font-size: var(--sb-text-2xs); font-weight: var(--sb-weight-semi); letter-spacing: var(--sb-tracking-label); text-transform: uppercase; color: var(--sb-text-label); }
.sb-stat-value { font-family: var(--sb-font-stat); font-size: var(--sb-text-4xl); font-weight: var(--sb-weight-bold); letter-spacing: var(--sb-tracking-stat); line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--sb-text-primary); }
.sb-stat-value-sm { font-size: var(--sb-text-2xl); }
.sb-stat-unit { font-size: 0.5em; font-weight: var(--sb-weight-medium); color: var(--sb-text-secondary); margin-left: 2px; }
.sb-stat-meta { font-size: var(--sb-text-xs); color: var(--sb-text-secondary); }
.sb-stat-row { display: grid; gap: var(--sb-space-6); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* KPI Hero — le gradient seul plafonne à 2,24:1 sous le texte blanc.
   Le scrim (0,30→0,46) le remonte au-dessus de 4,5:1 sur les trois arrêts. */
.sb-kpi-hero {
  position: relative; overflow: hidden;
  border-radius: var(--sb-radius-xl);
  padding: var(--sb-space-8);
  background-image: var(--sb-scrim-hero), var(--sb-gradient-hero);
  color: #ffffff;
  box-shadow: var(--sb-shadow-xl);
}
.sb-kpi-hero .sb-stat-label { color: rgba(255, 255, 255, 0.86); }
.sb-kpi-hero .sb-stat-value { color: #ffffff; font-size: var(--sb-text-6xl); }
.sb-kpi-hero .sb-stat-meta  { color: rgba(255, 255, 255, 0.86); }
.sb-kpi-hero > * { position: relative; z-index: 1; max-width: 78%; }
.sb-kpi-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 88% 8%, rgba(255,255,255,0.16), transparent 70%);
}

/* ==========================================================================
   TABLEAU DE STATS
   ========================================================================== */
.sb-table-wrap { overflow-x: auto; border-radius: var(--sb-radius-lg); border: 1px solid var(--sb-border-medium); background: var(--sb-bg-card-elevated); }
.sb-table { width: 100%; border-collapse: collapse; font-size: var(--sb-text-base); }
.sb-table caption { text-align: left; padding: var(--sb-space-4) var(--sb-space-4) 0; font-size: var(--sb-text-sm); color: var(--sb-text-secondary); }
.sb-table thead th {
  text-align: left; padding: var(--sb-space-3) var(--sb-space-4);
  font-size: var(--sb-text-2xs); font-weight: var(--sb-weight-bold);
  letter-spacing: var(--sb-tracking-label); text-transform: uppercase;
  color: var(--sb-text-label); background: var(--sb-bg-card-flat);
  border-bottom: 1px solid var(--sb-border-strong); white-space: nowrap;
}
.sb-table td { padding: var(--sb-space-3) var(--sb-space-4); border-bottom: 1px solid var(--sb-border-subtle); vertical-align: middle; }
.sb-table tbody tr:last-child td { border-bottom: none; }
.sb-table tbody tr:hover { background: rgba(242, 98, 31, 0.045); }
.sb-table .sb-num, .sb-table thead th.sb-num { text-align: right; font-family: var(--sb-font-stat); font-variant-numeric: tabular-nums; letter-spacing: var(--sb-tracking-stat); }
.sb-table thead th.sb-num { font-family: var(--sb-font-body); }
/* En-tete de ligne : c'est une cellule de donnee, pas un en-tete de colonne */
.sb-table tbody th {
  text-align: left; padding: var(--sb-space-3) var(--sb-space-4);
  font-family: var(--sb-font-body); font-size: inherit; font-weight: var(--sb-weight-regular);
  text-transform: none; letter-spacing: var(--sb-tracking-normal);
  color: var(--sb-text-primary); background: transparent;
  border-bottom: 1px solid var(--sb-border-subtle); white-space: nowrap;
}
.sb-table tbody tr:last-child th { border-bottom: none; }
.sb-table-sticky thead th { position: sticky; top: 0; z-index: var(--sb-z-sticky); }
.sb-table thead th[aria-sort] { cursor: pointer; }
.sb-table thead th[aria-sort="ascending"]::after  { content: ' ↑'; color: var(--sb-orange-ink); }
.sb-table thead th[aria-sort="descending"]::after { content: ' ↓'; color: var(--sb-orange-ink); }
.sb-table-highlight { background: var(--sb-orange-glow-soft) !important; box-shadow: inset 3px 0 0 var(--sb-orange); }

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */
.sb-field { display: flex; flex-direction: column; gap: var(--sb-space-2); }
.sb-field-label { font-size: var(--sb-text-sm); font-weight: var(--sb-weight-semi); color: var(--sb-text-primary); }
.sb-field-hint  { font-size: var(--sb-text-xs); color: var(--sb-text-secondary); }
.sb-field-error { font-size: var(--sb-text-xs); color: var(--sb-danger-ink); font-weight: var(--sb-weight-medium); display: flex; align-items: center; gap: 4px; }
.sb-field-error::before { content: '⚠'; }

.sb-input, .sb-select, .sb-textarea {
  width: 100%; min-height: 40px;
  padding: var(--sb-space-2) var(--sb-space-3);
  font-family: var(--sb-font-body); font-size: var(--sb-text-md);
  color: var(--sb-text-primary); background: var(--sb-bg-card-elevated);
  border: 1px solid var(--sb-border-input); border-radius: var(--sb-radius-md);
  transition: border-color var(--sb-duration-fast) var(--sb-ease-standard),
              box-shadow var(--sb-duration-fast) var(--sb-ease-standard);
}
.sb-input::placeholder, .sb-textarea::placeholder { color: var(--sb-text-secondary); }
.sb-input:hover, .sb-select:hover { border-color: var(--sb-text-secondary); }
.sb-input[aria-invalid="true"] { border-color: var(--sb-danger-ink); }
.sb-input:disabled { background: var(--sb-bg-pill-inactive); color: var(--sb-text-secondary); cursor: not-allowed; }
.sb-textarea { min-height: 96px; resize: vertical; line-height: var(--sb-leading-normal); }
.sb-select {
  appearance: none; padding-right: var(--sb-space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231c1a17' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 10px;
}
.sb-search { position: relative; }
.sb-search .sb-input { padding-left: var(--sb-space-8); }
.sb-search::before { content: '⌕'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sb-text-secondary); font-size: var(--sb-text-lg); pointer-events: none; }

.sb-switch { display: inline-flex; align-items: center; gap: var(--sb-space-3); cursor: pointer; }
.sb-switch-track { width: 40px; height: 22px; border-radius: var(--sb-radius-pill); background: var(--sb-border-input); position: relative; transition: background-color var(--sb-duration-base) var(--sb-ease-standard); flex: none; }
.sb-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; box-shadow: var(--sb-shadow-sm); transition: transform var(--sb-duration-base) var(--sb-ease-spring); }
.sb-switch input:checked + .sb-switch-track { background: var(--sb-orange-deep); }
.sb-switch input:checked + .sb-switch-track::after { transform: translateX(18px); }
.sb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.sb-header {
  position: sticky; top: 0; z-index: var(--sb-z-header);
  height: var(--sb-header-height);
  display: flex; align-items: center; gap: var(--sb-space-6);
  padding: 0 var(--sb-space-6);
  background: rgba(245, 241, 233, 0.82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sb-border-medium);
}
.sb-nav { display: flex; align-items: center; gap: var(--sb-space-1); }
.sb-nav-link {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 0 var(--sb-space-4); border-radius: var(--sb-radius-pill);
  font-size: var(--sb-text-md); font-weight: var(--sb-weight-semi);
  color: var(--sb-text-secondary); text-decoration: none;
  transition: background-color var(--sb-duration-fast) var(--sb-ease-standard), color var(--sb-duration-fast) var(--sb-ease-standard);
}
.sb-nav-link:hover { background: var(--sb-bg-pill-hover); color: var(--sb-text-primary); }
.sb-nav-link[aria-current="page"] { background: var(--sb-bg-ink); color: var(--sb-text-invert); }

.sb-tabs { display: flex; gap: var(--sb-space-1); border-bottom: 1px solid var(--sb-border-medium); }
.sb-tab {
  position: relative; padding: var(--sb-space-3) var(--sb-space-4);
  background: none; border: none; cursor: pointer;
  font-family: var(--sb-font-body); font-size: var(--sb-text-md); font-weight: var(--sb-weight-semi);
  color: var(--sb-text-secondary);
  transition: color var(--sb-duration-fast) var(--sb-ease-standard);
}
.sb-tab:hover { color: var(--sb-text-primary); }
.sb-tab[aria-selected="true"] { color: var(--sb-text-primary); }
.sb-tab[aria-selected="true"]::after {
  content: ''; position: absolute; left: var(--sb-space-3); right: var(--sb-space-3); bottom: -1px;
  height: 2px; background: var(--sb-orange); border-radius: 2px;
}

.sb-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sb-space-2); font-size: var(--sb-text-sm); color: var(--sb-text-secondary); }
.sb-breadcrumb a { color: var(--sb-text-secondary); text-decoration: none; }
.sb-breadcrumb a:hover { color: var(--sb-orange-ink); text-decoration: underline; }
.sb-breadcrumb li + li::before { content: '/'; margin-right: var(--sb-space-2); color: var(--sb-text-tertiary); }
.sb-breadcrumb [aria-current="page"] { color: var(--sb-text-primary); font-weight: var(--sb-weight-semi); }

.sb-pagination { display: flex; align-items: center; gap: var(--sb-space-1); }
.sb-page-btn {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--sb-radius-sm); border: 1px solid transparent; background: none; cursor: pointer;
  font-family: var(--sb-font-stat); font-size: var(--sb-text-sm); color: var(--sb-text-primary);
}
.sb-page-btn:hover { background: var(--sb-bg-pill-hover); }
.sb-page-btn[aria-current="page"] { background: var(--sb-bg-ink); color: var(--sb-text-invert); }

/* ==========================================================================
   AVATARS
   ========================================================================== */
.sb-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--sb-gradient-orange); color: #ffffff;
  font-family: var(--sb-font-title); font-size: var(--sb-text-sm); font-weight: var(--sb-weight-bold);
  overflow: hidden; box-shadow: var(--sb-shadow-inset);
}
.sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sb-avatar-sm { width: 26px; height: 26px; font-size: var(--sb-text-2xs); }
.sb-avatar-lg { width: 56px; height: 56px; font-size: var(--sb-text-lg); }
.sb-avatar-blue { background: linear-gradient(140deg, #8b98f5, #4c5bd4); }
/* Numéro de maillot */
.sb-jersey {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 5px; border-radius: var(--sb-radius-sm);
  background: var(--sb-bg-pill-inactive); font-family: var(--sb-font-stat);
  font-size: var(--sb-text-sm); font-weight: var(--sb-weight-bold); color: var(--sb-text-primary);
}
.sb-player-cell { display: flex; align-items: center; gap: var(--sb-space-3); }

/* ==========================================================================
   FEEDBACK — modal, toast, tooltip
   ========================================================================== */
.sb-overlay { position: fixed; inset: 0; z-index: var(--sb-z-overlay); background: rgba(26, 23, 20, 0.44); backdrop-filter: blur(3px); }
.sb-modal {
  position: relative; z-index: var(--sb-z-modal);
  width: min(560px, calc(100vw - 2rem));
  background: var(--sb-bg-card-elevated); border-radius: var(--sb-radius-xl);
  box-shadow: var(--sb-shadow-xl); padding: var(--sb-space-8);
  animation: sb-modal-in var(--sb-duration-slow) var(--sb-ease-entrance);
}
@keyframes sb-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.sb-modal-title { font-family: var(--sb-font-title); font-size: var(--sb-text-2xl); letter-spacing: var(--sb-tracking-title); margin-bottom: var(--sb-space-2); }
.sb-modal-actions { display: flex; justify-content: flex-end; gap: var(--sb-space-3); margin-top: var(--sb-space-6); }

.sb-toast {
  display: flex; align-items: flex-start; gap: var(--sb-space-3);
  padding: var(--sb-space-4); border-radius: var(--sb-radius-md);
  background: var(--sb-bg-ink); color: var(--sb-text-invert);
  box-shadow: var(--sb-shadow-xl); max-width: 380px;
  font-size: var(--sb-text-md);
}
.sb-toast-success { border-left: 3px solid #4ade8a; }
.sb-toast-danger  { border-left: 3px solid #ff8a8e; }
.sb-toast-info    { border-left: 3px solid var(--sb-orange-bright); }

.sb-tooltip {
  display: inline-block; padding: var(--sb-space-2) var(--sb-space-3);
  background: var(--sb-bg-ink); color: var(--sb-text-invert);
  font-size: var(--sb-text-sm); border-radius: var(--sb-radius-sm);
  box-shadow: var(--sb-shadow-md); max-width: 240px; z-index: var(--sb-z-tooltip);
}

/* ==========================================================================
   ÉTATS — vide, chargement
   ========================================================================== */
.sb-empty { text-align: center; padding: var(--sb-space-12) var(--sb-space-6); max-width: 420px; margin-inline: auto; }
.sb-empty-icon { width: 52px; height: 52px; margin: 0 auto var(--sb-space-4); border-radius: 50%; background: var(--sb-orange-glow-soft); display: grid; place-items: center; font-size: var(--sb-text-2xl); }
.sb-empty-title { font-family: var(--sb-font-title); font-size: var(--sb-text-xl); letter-spacing: var(--sb-tracking-title); margin-bottom: var(--sb-space-2); }
.sb-empty-text { color: var(--sb-text-secondary); font-size: var(--sb-text-md); margin-bottom: var(--sb-space-5); }

.sb-skeleton {
  border-radius: var(--sb-radius-sm);
  background: linear-gradient(90deg, rgba(28,22,16,0.055) 25%, rgba(28,22,16,0.10) 50%, rgba(28,22,16,0.055) 75%);
  background-size: 200% 100%;
  animation: sb-shimmer 1.4s var(--sb-ease-standard) infinite;
}
@keyframes sb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sb-skeleton-text { height: 0.75em; margin-block: 0.25em; }
.sb-skeleton-title { height: 1.4em; width: 45%; }

.sb-progress { height: 6px; border-radius: var(--sb-radius-pill); background: var(--sb-bg-pill-inactive); overflow: hidden; }
.sb-progress-bar { height: 100%; border-radius: inherit; background: var(--sb-gradient-btn); transition: width var(--sb-duration-slow) var(--sb-ease-standard); }

.sb-divider { height: 1px; background: var(--sb-border-medium); border: 0; margin-block: var(--sb-space-6); }

/* ==========================================================================
   DATA-VIZ & SHOT CHART
   ========================================================================== */
.sb-chart { background: var(--sb-bg-card-elevated); border-radius: var(--sb-radius-lg); padding: var(--sb-space-5); }
.sb-chart-grid line, .sb-chart .grid line { stroke: var(--sb-viz-grid); stroke-width: 1; }
.sb-chart-axis { stroke: var(--sb-viz-axis); }
.sb-chart-label { font-family: var(--sb-font-stat); font-size: var(--sb-text-2xs); fill: var(--sb-text-secondary); }
.sb-legend { display: flex; flex-wrap: wrap; gap: var(--sb-space-4); font-size: var(--sb-text-sm); color: var(--sb-text-secondary); }
.sb-legend-item { display: inline-flex; align-items: center; gap: var(--sb-space-2); }
.sb-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Tir réussi = disque plein · tir manqué = anneau ouvert.
   La forme porte l'information autant que la couleur. */
.sb-shot-made   { fill: var(--sb-orange); stroke: #ffffff; stroke-width: 1; }
.sb-shot-missed { fill: none; stroke: rgba(28, 26, 23, 0.42); stroke-width: 1.5; }
.sb-court-line  { stroke: rgba(30, 24, 18, 0.30); fill: none; stroke-width: 1.5; }
.sb-court-bg    { fill: var(--sb-bg-card-flat); }

/* ==========================================================================
   UTILITAIRES
   ========================================================================== */
.sb-container { width: 100%; max-width: var(--sb-container); margin-inline: auto; padding-inline: var(--sb-space-6); }
.sb-stack   { display: flex; flex-direction: column; }
.sb-stack-2 { gap: var(--sb-space-2); } .sb-stack-3 { gap: var(--sb-space-3); }
.sb-stack-4 { gap: var(--sb-space-4); } .sb-stack-6 { gap: var(--sb-space-6); }
.sb-stack-8 { gap: var(--sb-space-8); }
/* v1.1 : les pas 5 et 10 existaient dans l'echelle d'espacement sans utilitaire
   correspondant. Les sections de la vitrine en ont besoin (20 px entre les
   elements d'une carte, 40 px entre les blocs d'une section). */
.sb-stack-5 { gap: var(--sb-space-5); } .sb-stack-10 { gap: var(--sb-space-10); }
.sb-row { display: flex; align-items: center; }
.sb-row-2 { gap: var(--sb-space-2); } .sb-row-3 { gap: var(--sb-space-3); }
.sb-row-4 { gap: var(--sb-space-4); } .sb-row-6 { gap: var(--sb-space-6); }
.sb-between { justify-content: space-between; }
.sb-wrap { flex-wrap: wrap; }
.sb-grid { display: grid; gap: var(--sb-space-4); }
.sb-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sb-grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sb-grid-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sb-scroll-x { overflow-x: auto; }

@media (max-width: 782px) {
  :root { --sb-text-6xl: 2.5rem; --sb-text-5xl: 2rem; --sb-text-4xl: 1.625rem; }
  .sb-kpi-hero { padding: var(--sb-space-6); }
  .sb-kpi-hero > * { max-width: 100%; }
  .sb-kpi-hero { background-image: linear-gradient(180deg, rgba(26,23,20,.42) 0%, rgba(26,23,20,.54) 100%), var(--sb-gradient-hero); }
  .sb-card { padding: var(--sb-space-5); }
}

/* ==========================================================================
   EXTENSION VITRINE — v1.1 (site public)
   Le DS v1.0 est calibre pour l'application : corps 13 px, tableaux denses,
   beaucoup d'information par ecran. Une page marketing se lit autrement, a
   17 px. Le scope .sb-site remappe UNIQUEMENT les tokens de taille de texte.
   Couleurs, rayons, ombres, durees et composants restent ceux du systeme.
   .sb-appframe retablit l'echelle app a l'interieur d'une demonstration
   produit, pour qu'une capture de tableau de stats ressemble au produit.
   ========================================================================== */
.sb-scope.sb-site {
  --sb-text-2xs:  0.75rem;    /* 12 */
  --sb-text-xs:   0.8125rem;  /* 13 */
  --sb-text-sm:   0.9375rem;  /* 15 */
  --sb-text-base: 1.0625rem;  /* 17 — corps de page */
  --sb-text-md:   1.125rem;   /* 18 */
  --sb-text-lg:   1.25rem;    /* 20 — chapo */
  --sb-text-xl:   1.375rem;   /* 22 */
  --sb-text-2xl:  1.625rem;   /* 26 */
  --sb-text-3xl:  2rem;       /* 32 */
  --sb-text-4xl:  clamp(1.625rem, 2.7vw, 2.125rem); /* 26 → 34 */
  --sb-text-5xl:  clamp(1.875rem, 3.4vw, 2.625rem); /* 30 → 42 */
  --sb-text-6xl:  clamp(2.25rem,  4.4vw, 3.5rem);   /* 36 → 56 */
}

/* Les halos radiaux du fond app sont coupes sur la vitrine. Trois orbes floues
   derriere une landing page, c'est exactement le reflexe generique qu'on refuse
   ailleurs. Le rythme vient des sections, pas du fond. Pour les retablir :
   supprimer la ligne background-image ci-dessous. */
.sb-scope.sb-site {
  background-image: none;
}

.sb-site .sb-appframe {
  --sb-text-2xs:  0.625rem;
  --sb-text-xs:   0.6875rem;
  --sb-text-sm:   0.75rem;
  --sb-text-base: 0.8125rem;
  --sb-text-md:   0.875rem;
  --sb-text-lg:   1rem;
  --sb-text-xl:   1.125rem;
  --sb-text-2xl:  1.3125rem;
  --sb-text-3xl:  1.5625rem;
  --sb-text-4xl:  2rem;
  font-size: var(--sb-text-base);
  line-height: var(--sb-leading-normal);
}



/* ==========================================================================
   CONTENU SUR SURFACE SOMBRE
   Le systeme n'avait pas d'utilitaire pour le texte pose sur une surface
   sombre : chaque page le reinventait dans son propre CSS. Cette classe le
   fait une fois, avec les tokens du systeme.
   ========================================================================== */
.sb-on-ink { color: var(--sb-text-invert); }
.sb-on-ink h1, .sb-on-ink h2, .sb-on-ink h3,
.sb-on-ink h4, .sb-on-ink h5, .sb-on-ink h6,
.sb-on-ink p, .sb-on-ink dt, .sb-on-ink dd,
.sb-on-ink li, .sb-on-ink label { color: var(--sb-text-invert); }
.sb-on-ink .sb-caption, .sb-on-ink .sb-lead,
.sb-on-ink figcaption { color: rgba(250, 248, 243, 0.74); }
/* Le libelle garde l'encre pleine. A 74 pour cent d'opacite il tombe a 3,3:1
   sur les surfaces sombres les plus claires, l'orange interactif par exemple,
   sous le seuil AA du petit texte. */
.sb-on-ink .sb-label, .sb-on-ink .sb-stat-label { color: var(--sb-text-invert); }
.sb-on-ink .sb-text-orange { color: var(--sb-orange-bright); }

/* ==========================================================================
   PONT ELEMENTOR — a garder en dernier dans la feuille
   Les Couleurs globales du kit deviennent la source des tokens de couleur.
   Changer une couleur dans Reglages du site > Couleurs globales change tout le
   systeme d'un coup, sans toucher a cette feuille. La valeur d'origine reste en
   repli si la couleur globale venait a disparaitre.
   Seules les couleurs sont pontees : les echelles typo, d'espacement, de rayon
   et d'ombre restent decidees ici, elles n'ont pas d'equivalent global.
   ========================================================================== */
:root {
  /* Couleurs systeme du kit */
  --sb-orange:           var(--e-global-color-primary,   #f2621f);
  --sb-bg-ink:           var(--e-global-color-secondary, #1a1714);
  --sb-text-primary:     var(--e-global-color-text,      #1c1a17);
  --sb-orange-ink:       var(--e-global-color-accent,    #b6410b);
  /* Couleurs personnalisees du kit */
  --sb-bg-page:          var(--e-global-color-sbpage,   #ece6da);
  --sb-bg-surface:       var(--e-global-color-sbsurf,   #f5f1e9);
  --sb-bg-card-flat:     var(--e-global-color-sbcardf,  #faf8f3);
  --sb-bg-card-elevated: var(--e-global-color-sbcarde,  #ffffff);
  --sb-bg-ink-hover:     var(--e-global-color-sbinkh,   #2b2621);
  --sb-text-secondary:   var(--e-global-color-sbtxt2,   rgba(28, 26, 23, 0.64));
  --sb-text-label:       var(--e-global-color-sbtxt2,   rgba(28, 26, 23, 0.64));
  --sb-text-invert:      var(--e-global-color-sbtxtinv, #faf8f3);
  --sb-orange-bright:    var(--e-global-color-sborbr,   #ff8a4c);
  --sb-orange-deep:      var(--e-global-color-sbordp,   #c64a1f);
  --sb-border-focus:     var(--e-global-color-sbordp,   #c64a1f);
  --sb-orange-glow-soft: var(--e-global-color-sborglw,  rgba(242, 98, 31, 0.12));
  --sb-blue:             var(--e-global-color-sbblue,   #6d7cf0);
  --sb-blue-ink:         var(--e-global-color-sbblink,  #4255ec);
  --sb-blue-glow-soft:   var(--e-global-color-sbblglw,  rgba(109, 124, 240, 0.12));
  --sb-border-subtle:    var(--e-global-color-sbbsub,   rgba(30, 24, 18, 0.07));
  --sb-border-medium:    var(--e-global-color-sbbmed,   rgba(30, 24, 18, 0.11));
  --sb-border-strong:    var(--e-global-color-sbbstr,   rgba(30, 24, 18, 0.18));
  --sb-border-input:     var(--e-global-color-sbbinp,   rgba(30, 24, 18, 0.48));
}

/* ==========================================================================
   PROTOTYPE VITRINE — mise en page uniquement.
   Aucune couleur ni taille en dur : tout passe par les tokens du systeme.
   Dans Elementor, ce bloc devient des reglages de conteneur
   (Avance > Mise en page / Remplissage / Marge). Il ne part jamais dans la
   feuille du design system.
   ========================================================================== */

/* La page est monochrome par choix : creme clair unique, comme le systeme.
   Le fond est peint explicitement pour ne pas emprunter celui de l'hote. */
.sb-scope.sb-site { margin: 0; background: var(--sb-bg-page); color: var(--sb-text-primary); }

/* Grifter est la police de titre du systeme et ses fichiers manquent encore.
   Days One tient son role sur le web : meme famille de formes, geometrique
   aux angles adoucis, comme les titres de l'application. Des que les woff2
   de Grifter arrivent, ils reprennent la main sans changer une ligne.
   font-synthesis coupe le faux gras : Days One n'existe qu'en une graisse. */
.sb-scope.sb-site { --sb-font-title: 'Grifter', 'Days One', 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-synthesis-weight: none;
  --sb-text-6xl: clamp(2.5rem, 5vw, 3.875rem); }

/* Un enfant de grille refuse de descendre sous sa largeur de contenu : un
   tableau large pousse alors toute la page en debordement horizontal.
   min-width:0 rend la main au conteneur, le tableau defile dans son cadre. */
.sb-scope .sb-p-hero > *, .sb-scope .sb-p-split > *, .sb-scope .sb-p-split-6040 > *, .sb-scope .sb-p-steps > *, .sb-scope .sb-p-limits > *, .sb-scope .sb-p-faq-split > *, .sb-scope .sb-p-footer > *, .sb-scope .sb-p-ratios > *, .sb-scope .sb-p-form-grid > *, .sb-scope .sb-p-tarif > * { min-width: 0; }

/* Ancre sous un bandeau fixe : sans cette marge de defilement, le titre vise
   se retrouve cache derriere l'en-tete de 64 px. */
.sb-scope [id] { scroll-margin-top: calc(var(--sb-header-height) + var(--sb-space-6)); }

.sb-scope .sb-p-skip { position: absolute; left: var(--sb-space-4); top: var(--sb-space-2);
  transform: translateY(-160%); z-index: var(--sb-z-tooltip);
  transition: transform var(--sb-duration-fast) var(--sb-ease-standard); }
.sb-scope .sb-p-skip:focus-visible { transform: none; }

.sb-scope .sb-p-section { padding-block: var(--sb-space-20); }
.sb-scope .sb-p-section-tight { padding-block: var(--sb-space-16); }
.sb-scope .sb-p-ink { background: var(--sb-bg-ink); color: var(--sb-text-invert); }
.sb-scope .sb-p-ink h1, .sb-scope .sb-p-ink h2, .sb-scope .sb-p-ink h3, .sb-scope .sb-p-ink h4, .sb-scope .sb-p-ink h5, .sb-scope .sb-p-ink h6, .sb-scope .sb-p-ink p, .sb-scope .sb-p-ink dt, .sb-scope .sb-p-ink li, .sb-scope .sb-p-ink label { color: var(--sb-text-invert); }
.sb-scope .sb-p-ink .sb-label, .sb-scope .sb-p-ink .sb-stat-label { color: rgba(250,248,243,.74); }
.sb-scope .sb-p-ink .sb-lead, .sb-scope .sb-p-ink .sb-caption, .sb-scope .sb-p-ink figcaption { color: rgba(250,248,243,.74); }
.sb-scope .sb-p-ink .sb-stat-value { color: var(--sb-text-invert); }
.sb-scope .sb-p-surface { background: var(--sb-bg-surface); }

/* LE PAVE ENCASTRE
   Le fond de la page ne change plus qu'aux deux moments encre. Ce qui doit se
   detacher se pose DESSUS, en objet, au lieu de peindre une bande pleine
   largeur. Le pave prend le rayon 3xl, pas celui des cartes qu'il contient :
   deux objets emboites ne peuvent pas avoir le meme arrondi. */
/* Le pave se detache du bloc encre qui suit : sans cette marge, la coupe
   sombre mange ses coins arrondis et l'objet redevient une bande. */
.sb-scope .sb-p-dalle { margin-inline: var(--sb-space-6); margin-bottom: var(--sb-space-20);
  background: var(--sb-bg-surface); border-radius: var(--sb-radius-3xl); }
.sb-scope .sb-p-dalle > .sb-p-section:first-child, .sb-scope .sb-p-dalle > .sb-p-section-tight:first-child {
  padding-top: var(--sb-space-16); }
.sb-scope .sb-p-dalle > .sb-p-section:last-child, .sb-scope .sb-p-dalle > .sb-p-section-tight:last-child {
  padding-bottom: var(--sb-space-16); }
@media (max-width: 900px){ .sb-scope .sb-p-dalle { margin-inline: var(--sb-space-4);
  margin-bottom: var(--sb-space-16); border-radius: var(--sb-radius-2xl); }}

/* Une couture se pose maintenant dans plus d'air : le fond ne separe plus rien,
   c'est l'espace qui separe, et le filet qui le dit. */
.sb-scope .sb-p-seam.sb-p-section { padding-top: var(--sb-space-24); }
.sb-scope .sb-p-rule { border: 0; border-top: 1px solid var(--sb-border-medium); margin: 0; }

/* ==========================================================================
   LES COUTURES ENTRE SECTIONS
   La page se lit en cinq blocs, pas en dix alternances : creme (le club),
   encre (ce que la FFBB envoie), creme (le produit, trois sections),
   surface (les conditions, trois sections), encre (l'acces et le pied).
   Une alternance creme/surface a chaque section ne separait rien : quatre
   pour cent d'ecart entre les deux teintes, l'oeil ne les distingue pas.

   Deux sections d'un meme bloc sont donc separees par un filet, pas par un
   fond. Le filet s'arrete a la mesure du conteneur : une ligne qui traverse
   toute la fenetre serait une bande d'accent, celle-ci est une reglure de
   page, comme les rangees de la section « trois temps ».
   Les bords de bloc, eux, ne prennent aucun filet : le contraste creme
   contre encre est deja la coupe. */
.sb-scope .sb-p-seam { position: relative; }
.sb-scope .sb-p-seam::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; margin-inline: auto;
  width: min(calc(var(--sb-container) - 2 * var(--sb-space-6)), calc(100% - 2 * var(--sb-space-6)));
  height: 1px; background: var(--sb-border-medium); transform-origin: left;
}

/* Une coupe sombre ouvre plus haut qu'elle ne ferme, et la section qui la
   suit reprend son souffle. C'est la respiration qui marque le bloc, pas
   un ornement pose sur la limite. */
.sb-scope .sb-p-ink.sb-p-section { padding-block: var(--sb-space-24) var(--sb-space-20); }
.sb-scope .sb-p-after-ink { padding-top: var(--sb-space-24); }

/* ARRIVEE : le marqueur se trace.
   L'app dessine une barre orange a gauche de chaque bloc. En vitrine, cette
   barre se trace de haut en bas quand la section entre, et le filet de
   couture se tire de gauche a droite juste avant. Rien d'autre ne bouge :
   le texte, les cartes et les tableaux sont deja la, en entier.
   Le JS n'arme ces deux etats que si le mouvement reduit n'est pas demande,
   et sans JS tout reste affiche. */
.sb-scope .sb-p-seam.sb-p-arm::before { transform: scaleX(0);
  transition: transform 400ms var(--sb-ease-entrance); }
.sb-scope .sb-p-seam.sb-p-arm.is-in::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .sb-scope .sb-p-seam.sb-p-arm::before {
    transform: none !important; transition: none !important; }}

/* Bandeau : echelle app, et zones tactiles remontees a 40 px minimum. */
.sb-scope .sb-header { --sb-text-md: 0.9375rem; --sb-text-sm: 0.875rem; }
.sb-scope .sb-header .sb-nav-link { min-height: 40px; }
.sb-scope .sb-header .sb-btn { min-height: 40px; }
.sb-scope .sb-p-burger { display: none; }
.sb-scope .sb-p-cta-court { display: none; }
@media (max-width: 900px){
  .sb-scope .sb-header { gap: var(--sb-space-3); padding-inline: var(--sb-space-4); }
  .sb-scope .sb-header .sb-nav, .sb-scope .sb-p-hide-sm, .sb-scope .sb-p-cta-long { display: none; }
  .sb-scope .sb-p-cta-court { display: inline; }
  .sb-scope .sb-p-burger { display: inline-flex; width: 44px; min-height: 44px; }}

.sb-scope .sb-p-hero { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: var(--sb-space-12); align-items: center; }
.sb-scope .sb-p-hero-media { position: relative; }

/* ==========================================================================
   DEMONSTRATION DU DEPOT
   Le vrai parcours du produit, en trois temps : on lache l'archive, le ballon
   tourne pendant la lecture, le tableau de bord se remplit. Le chargeur est
   celui de l'application, pas un rond qui tourne.
   Cycle de 11s, dont 4,5 s passees sur le resultat.
   En Elementor : conteneur en position relative, deux couches en position
   absolue par-dessus, et ce bloc colle dans Avance > CSS personnalise du
   conteneur. Les Effets de mouvement ne savent pas enchainer quatre etats,
   c'est le barreau 6 de l'echelle d'escalade, assume et signale.
   ========================================================================== */
.sb-scope .sb-p-demo { position: relative; }
.sb-scope .sb-p-demo-result { animation: sb-p-reveal 11s var(--sb-ease-standard) infinite both; }
.sb-scope .sb-p-demo-drop { position: absolute; inset: 0; pointer-events: none;
  animation: sb-p-layer 11s var(--sb-ease-standard) infinite both; }
.sb-scope .sb-p-demo-load { position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--sb-radius-lg); background: rgba(250,248,243,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sb-space-4); animation: sb-p-load 11s var(--sb-ease-standard) infinite both; }
.sb-scope .sb-p-ball { width: 46px; height: 46px; animation: sb-p-spin 900ms linear infinite; }
.sb-scope .sb-p-load-txt { margin: 0; font-size: var(--sb-text-sm); font-weight: 600; color: var(--sb-text-secondary); }

.sb-scope .sb-p-drop-zone { position: absolute; inset: 0; border: 2px dashed var(--sb-border-strong);
  border-radius: var(--sb-radius-lg); background-color: var(--sb-bg-card-flat);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sb-space-3); text-align: center; padding: var(--sb-space-6);
  padding-bottom: 124px; /* place laissee au fichier qui se pose sous le libelle */
  animation: sb-p-zone 11s var(--sb-ease-standard) infinite both; }
.sb-scope .sb-p-drop-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--sb-radius-pill); background: var(--sb-orange-glow-soft);
  color: var(--sb-orange-ink); animation: sb-p-icon 11s var(--sb-ease-standard) infinite both; }
.sb-scope .sb-p-drop-title { margin: 0; font-family: var(--sb-font-body); font-weight: 700;
  font-size: var(--sb-text-md); color: var(--sb-text-primary); }
.sb-scope .sb-p-drop-hint { margin: 0; font-size: var(--sb-text-sm); color: var(--sb-text-secondary); }

.sb-scope .sb-p-drop-file { position: absolute; left: 50%; top: 50%; margin-left: -108px; margin-top: 14px;
  width: 216px; display: flex; align-items: center; gap: var(--sb-space-3);
  padding: var(--sb-space-3); border-radius: var(--sb-radius-md);
  background: var(--sb-bg-card-elevated); border: 1px solid var(--sb-border-medium);
  box-shadow: var(--sb-shadow-xl);
  animation: sb-p-file 11s var(--sb-ease-standard) infinite both; }
.sb-scope .sb-p-drop-ext { flex: none; width: 32px; height: 32px; border-radius: var(--sb-radius-sm);
  background: var(--sb-neutral-bg); display: grid; place-items: center;
  font-family: var(--sb-font-stat); font-size: 9px; font-weight: 700; color: var(--sb-text-primary); }
.sb-scope .sb-p-drop-name { display: flex; flex-direction: column; gap: 1px; min-width: 0;
  font-size: var(--sb-text-xs); font-weight: 600; color: var(--sb-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-scope .sb-p-drop-name span { font-weight: 400; color: var(--sb-text-secondary); }
.sb-scope .sb-p-drop-cursor { position: absolute; right: -10px; bottom: -14px; color: var(--sb-text-primary); }

/* 1. Le fichier arrive du haut a gauche, se pose, disparait. */
@keyframes sb-p-file{
  0%   { transform: translate(-104px, -136px) rotate(-9deg) scale(.94); opacity: 0; }
  4%   { transform: translate(-96px, -124px) rotate(-9deg) scale(.94); opacity: 1;
         animation-timing-function: var(--sb-ease-entrance); }
  21%  { transform: translate(0, 0) rotate(-2deg) scale(1); opacity: 1; }
  26%  { transform: translate(0, 8px) rotate(0deg) scale(.96); opacity: 0; }
  100% { transform: translate(-104px, -136px) rotate(-9deg) scale(.94); opacity: 0; }
}
/* 2. La zone s'allume a l'approche, encaisse le depot, s'eteint. */
@keyframes sb-p-zone{
  0%, 13%   { border-color: var(--sb-border-strong); background-color: var(--sb-bg-card-flat); }
  21%       { border-color: var(--sb-orange); background-color: #fdf3ec; }
  26%       { border-color: var(--sb-orange-deep); background-color: #fbe9de; }
  33%, 100% { border-color: var(--sb-border-strong); background-color: var(--sb-bg-card-flat); }
}
@keyframes sb-p-icon{
  0%, 15%   { transform: none; background-color: var(--sb-orange-glow-soft); }
  21%, 26%  { transform: translateY(-5px); background-color: rgba(242,98,31,.24); }
  33%, 100% { transform: none; background-color: var(--sb-orange-glow-soft); }
}
@keyframes sb-p-layer{
  0%, 27%   { opacity: 1; }
  32%, 94%  { opacity: 0; }
  100%      { opacity: 1; }
}
/* 3. Le ballon tourne pendant la lecture. */
@keyframes sb-p-load{
  0%, 27%   { opacity: 0; }
  32%, 41%  { opacity: 1; }
  47%, 100% { opacity: 0; }
}
@keyframes sb-p-spin{ to { transform: rotate(360deg); } }
/* 4. Le tableau de bord se remplit, tuile par tuile. */
@keyframes sb-p-reveal{
  0%, 41%   { opacity: .28; transform: scale(.985); }
  49%, 93%  { opacity: 1; transform: none; }
  100%      { opacity: .28; transform: scale(.985); }
}
@keyframes sb-p-tuile0{ 0%, 42.0% { opacity: 0; transform: translateY(9px); } 48.0%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(9px); } }
@keyframes sb-p-tuile1{ 0%, 43.6% { opacity: 0; transform: translateY(9px); } 49.6%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(9px); } }
@keyframes sb-p-tuile2{ 0%, 45.2% { opacity: 0; transform: translateY(9px); } 51.2%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(9px); } }
@keyframes sb-p-tuile3{ 0%, 46.8% { opacity: 0; transform: translateY(9px); } 52.8%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(9px); } }
.sb-scope .sb-p-demo-result .sb-stat-block:nth-child(1) { animation: sb-p-tuile0 11s var(--sb-ease-entrance) infinite both; }
.sb-scope .sb-p-demo-result .sb-stat-block:nth-child(2) { animation: sb-p-tuile1 11s var(--sb-ease-entrance) infinite both; }
.sb-scope .sb-p-demo-result .sb-stat-block:nth-child(3) { animation: sb-p-tuile2 11s var(--sb-ease-entrance) infinite both; }
.sb-scope .sb-p-demo-result .sb-stat-block:nth-child(4) { animation: sb-p-tuile3 11s var(--sb-ease-entrance) infinite both; }
/* Reduction des animations : on garde le resultat, les couches sortent. */
@media (prefers-reduced-motion: reduce){
  /* Les selecteurs de reinitialisation reprennent la specificite exacte des
     regles animees, sinon nth-child et .sb-p-hero-media l'emportent. */
  .sb-scope .sb-p-demo-result, .sb-scope .sb-p-demo-drop, .sb-scope .sb-p-demo-load, .sb-scope .sb-p-drop-zone, .sb-scope .sb-p-drop-icon, .sb-scope .sb-p-drop-file, .sb-scope .sb-p-ball { animation: none !important; }
  .sb-scope .sb-p-demo-result .sb-stat-block:nth-child(1), .sb-scope .sb-p-demo-result .sb-stat-block:nth-child(2), .sb-scope .sb-p-demo-result .sb-stat-block:nth-child(3), .sb-scope .sb-p-demo-result .sb-stat-block:nth-child(4), .sb-scope .sb-p-hero-media .sb-p-note { animation: none; opacity: 1; transform: none; }
  .sb-scope .sb-p-demo-drop, .sb-scope .sb-p-demo-load { display: none; }}

/* L'annotation commente une valeur du resultat : elle arrive avec lui. */
@keyframes sb-p-note-in{ 0%, 45% { opacity: 0; } 55%, 93% { opacity: 1; } 100% { opacity: 0; } }
.sb-scope .sb-p-hero-media .sb-p-note { animation: sb-p-note-in 11s var(--sb-ease-standard) infinite both; }


/* ==========================================================================
   LE MARQUEUR DE BLOC, REPRIS DE L'APPLICATION
   L'app marque chacun de ses blocs par une barre verticale orange a gauche du
   titre, avec le libelle de contexte EN DESSOUS du titre. La vitrine reprend
   ce marqueur au lieu d'en inventer un : c'est le meme produit.
   ========================================================================== */
.sb-scope .sb-p-titre { position: relative; }
.sb-scope .sb-p-titre > * { margin: 0; }
.sb-scope .sb-p-titre .sb-label { margin-top: var(--sb-space-2); display: block; }

/* Les blocs de donnees reprennent la carte de l'application : coins tres
   arrondis, fond blanc chaud, ombre douce, aucun filet exterieur. */
.sb-scope .sb-p-doc { border: 0; border-radius: var(--sb-radius-2xl);
  background: var(--sb-bg-card-elevated); box-shadow: var(--sb-shadow-lg); }

/* La rangee de tuiles de l'app : libelle en petites capitales, valeur en mono.
   La tuile mise en avant prend un fond orange tres pale et un filet orange. */
.sb-scope .sb-p-tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sb-space-4); }
.sb-scope .sb-p-tuile { padding: var(--sb-space-5) var(--sb-space-6); border-radius: var(--sb-radius-lg);
  background: var(--sb-bg-card-flat); border: 1px solid var(--sb-border-subtle);
  display: flex; flex-direction: column; gap: var(--sb-space-2); }
.sb-scope .sb-p-tuile-fort { background: var(--sb-orange-glow-soft); border-color: rgba(242,98,31,.34); }
.sb-scope .sb-p-tuile-val { font-family: var(--sb-font-stat); font-size: var(--sb-text-3xl);
  font-weight: 700; letter-spacing: var(--sb-tracking-stat); line-height: 1.05; }
.sb-scope .sb-p-tuile-fort .sb-p-tuile-val { color: var(--sb-orange-ink); }
.sb-scope .sb-p-tuile-meta { font-size: var(--sb-text-xs); color: var(--sb-text-secondary); }
@media (max-width: 1024px){ .sb-scope .sb-p-tuiles { grid-template-columns: repeat(2, 1fr); }}

/* Annotation manuscrite : la voix humaine de la page. Une seule sur tout le site. */
.sb-scope .sb-p-note { position: absolute; font-family: var(--sb-font-body); font-weight: 600; font-size: var(--sb-text-md);
  color: var(--sb-orange-ink); line-height: 1.25; max-width: 19ch; transform: rotate(-4deg); }
.sb-scope .sb-p-note svg { display: block; overflow: visible; }

/* ==========================================================================
   TROIS TEMPS : UN RAIL, PAS TROIS REGLURES
   Trois filets horizontaux decoupaient la sequence en trois lignes de tableau.
   Un rail vertical la recoud : le trait descend dans la gouttiere gauche, passe
   derriere les numeros, et son segment s'allume en orange quand l'etape arrive.
   C'est la barre que l'application pose a gauche de chaque bloc, mise debout.
   ========================================================================== */
.sb-scope .sb-p-steps { display: flex; flex-direction: column; }
.sb-scope .sb-p-step { position: relative; display: grid;
  grid-template-columns: 56px minmax(0,1fr) 340px; gap: var(--sb-space-8);
  align-items: center; padding-block: var(--sb-space-10); }

/* Le segment de rail : plein hauteur de l'etape, centre sur la colonne du
   numero. Le premier part du numero, le dernier s'y arrete : la sequence a un
   debut et une fin, elle ne deborde pas de la section. */
.sb-scope .sb-p-step::before { content: ''; position: absolute; left: 16px; width: 2px;
  top: 0; bottom: 0; background: var(--sb-border-medium); border-radius: 1px; }
.sb-scope .sb-p-step:first-child::before { top: 50%; }
.sb-scope .sb-p-step:last-child::before { bottom: 50%; }

/* Le rail reste neutre. Le marqueur orange du titre est deja une barre
   verticale : un rail orange juste en dessous ferait deux fois le meme signe
   et diluerait l'accent. C'est le numero qui s'allume, pas le trait. */
.sb-scope .sb-p-step::before { transform-origin: top; }
.sb-scope .sb-p-step.sb-p-arm::before { transform: scaleY(0);
  transition: transform 380ms var(--sb-ease-entrance); }
.sb-scope .sb-p-step.sb-p-arm.is-in::before { transform: scaleY(1); }

/* Le numero monte a 34 px de haut de casse et s'assoit sur le rail : fond
   opaque pour que le trait passe derriere, filet pour qu'il ne flotte pas. */
.sb-scope .sb-p-step-n { position: relative; z-index: 1; display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--sb-radius-pill);
  background: var(--sb-bg-page); border: 2px solid var(--sb-border-medium);
  font-family: var(--sb-font-stat); font-size: var(--sb-text-md); font-weight: 700;
  color: var(--sb-text-secondary);
  transition: border-color 260ms var(--sb-ease-standard),
              color 260ms var(--sb-ease-standard),
              background-color 260ms var(--sb-ease-standard); }
.sb-scope .sb-p-step.is-in .sb-p-step-n { border-color: var(--sb-orange);
  background: var(--sb-orange-glow-soft); color: var(--sb-orange-ink); }

@media (prefers-reduced-motion: reduce){
  .sb-scope .sb-p-step.sb-p-arm::before { transform: none !important; transition: none !important; }
  .sb-scope .sb-p-step-n { transition: none; }}
@media (max-width: 1024px){ .sb-scope .sb-p-step { grid-template-columns: 48px minmax(0,1fr) 260px; gap: var(--sb-space-6); }}
@media (max-width: 900px){
  .sb-scope .sb-p-step { grid-template-columns: 44px minmax(0,1fr); gap: var(--sb-space-5);
    padding-block: var(--sb-space-8); }
  .sb-scope .sb-p-step > :last-child { grid-column: 2; margin-top: var(--sb-space-2); }
  .sb-scope .sb-p-step::before { left: 16px; }}

.sb-scope .sb-p-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sb-space-10); align-items: center; }
.sb-scope .sb-p-split-6040 { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sb-space-10); align-items: start; }
.sb-scope .sb-p-ratios { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sb-space-6); }
.sb-scope .sb-p-vs { display: flex; align-items: baseline; gap: var(--sb-space-3); }
.sb-scope .sb-p-vs-a { font-family: var(--sb-font-stat); font-size: var(--sb-text-3xl); font-weight: 700; color: var(--sb-text-secondary); }
.sb-scope .sb-p-vs-b { font-family: var(--sb-font-stat); font-size: var(--sb-text-4xl); font-weight: 700; color: var(--sb-orange-ink); }

/* Les feuilles sont coupees en bas et fondues dans l'encre : on montre assez
   pour reconnaitre le document, pas assez pour le lire. */
.sb-scope .sb-p-paper-clip { position: relative; max-height: 430px; overflow: hidden;
  border-radius: var(--sb-radius-md); box-shadow: var(--sb-shadow-xl); background: #fff; }
.sb-scope .sb-p-paper-clip::after { content: ''; position: absolute; inset: auto 0 0 0; height: 180px;
  background: linear-gradient(to bottom, rgba(26,23,20,0), var(--sb-bg-ink)); pointer-events: none; }
.sb-scope .sb-p-paper { display: block; width: 100%; height: auto; }
.sb-scope .sb-p-paper-tilt { transform: rotate(-1.4deg); }
.sb-scope .sb-p-paper-tilt2 { transform: rotate(1deg); }

.sb-scope .sb-p-court { width: 100%; height: auto; display: block; }
.sb-scope .sb-p-sc-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
  gap: var(--sb-space-6); padding: var(--sb-space-6); border-bottom: 1px solid var(--sb-border-subtle); }
.sb-scope .sb-p-sc-nom { margin: 0; font-weight: 700; font-size: var(--sb-text-lg); }
.sb-scope .sb-p-sc-kpis { display: flex; gap: var(--sb-space-8); }
.sb-scope .sb-p-sc-kpi { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sb-scope .sb-p-sc-kpi-val { font-family: var(--sb-font-stat); font-size: var(--sb-text-3xl); font-weight: 700;
  letter-spacing: var(--sb-tracking-stat); line-height: 1; }
.sb-scope .sb-p-sc-corps { display: grid; grid-template-columns: 1fr 1.1fr; align-items: start; }
.sb-scope .sb-p-sc-table { border-left: 1px solid var(--sb-border-subtle); }
.sb-scope .sb-p-sc-table .sb-table thead th { background: transparent; border-bottom: 1px solid var(--sb-border-medium); }
.sb-scope .sb-p-sc-table .sb-table tbody th { display: flex; flex-direction: column; gap: var(--sb-space-2);
  align-items: flex-start; white-space: normal; }
.sb-scope .sb-p-sc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: var(--sb-space-2); vertical-align: baseline; }
.sb-scope .sb-p-sc-bar { display: block; width: 100%; max-width: 190px; height: 3px; border-radius: 2px;
  background: var(--sb-border-subtle); }
.sb-scope .sb-p-sc-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--sb-orange); }
.sb-scope .sb-p-sc-part { color: var(--sb-text-primary); font-weight: 700; }
.sb-scope .sb-p-sc-legende { display: flex; align-items: center; gap: 5px; margin-top: var(--sb-space-4); }

/* ==========================================================================
   TERRAIN INTERACTIF
   Le survol d'une zone du terrain et le survol de sa ligne dans le tableau
   declenchent le meme etat. Les tirs des autres zones s'effacent, la zone
   s'allume, l'infobulle donne le compte. Le clavier passe par les boutons du
   tableau : une forme SVG ne se focalise pas de maniere fiable.
   Courbes de sortie uniquement, jamais de rebond.
   ========================================================================== */
.sb-scope .sb-p-zone { fill: transparent; cursor: pointer;
  transition: fill var(--sb-duration-base) cubic-bezier(0.25,1,0.5,1); }
.sb-scope .sb-p-zone.is-on { fill: rgba(242,98,31,.13); }
.sb-scope .sb-p-court-lines, .sb-scope .sb-p-dots { pointer-events: none; }
.sb-scope .sb-p-dot { transition: opacity 180ms cubic-bezier(0.25,1,0.5,1),
                      transform 220ms cubic-bezier(0.22,1,0.36,1);
  transform-box: fill-box; transform-origin: center; }
.sb-scope .sb-p-court.is-focus .sb-p-dot { opacity: .16; }
.sb-scope .sb-p-court.is-focus .sb-p-dot.is-on { opacity: 1; transform: scale(1.22); }

.sb-scope .sb-p-tip { position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, -118%);
  background: var(--sb-bg-ink); color: var(--sb-text-invert);
  padding: var(--sb-space-3) var(--sb-space-4); border-radius: var(--sb-radius-md);
  box-shadow: var(--sb-shadow-lg); display: grid; gap: 2px; min-width: 132px;
  opacity: 0; transition: opacity 140ms cubic-bezier(0.25,1,0.5,1); }
.sb-scope .sb-p-tip.is-on { opacity: 1; }
.sb-scope .sb-p-tip-zone { font-size: var(--sb-text-2xs); font-weight: 700; letter-spacing: var(--sb-tracking-label);
  text-transform: uppercase; color: rgba(250,248,243,.74); }
.sb-scope .sb-p-tip-part { font-family: var(--sb-font-stat); font-size: var(--sb-text-2xl); font-weight: 700; line-height: 1; }
.sb-scope .sb-p-tip-meta { font-size: var(--sb-text-xs); color: rgba(250,248,243,.74); }

.sb-scope .sb-p-zone-btn { display: flex; flex-direction: column; gap: var(--sb-space-2); align-items: flex-start;
  width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; }
.sb-scope .sb-p-sc-table tbody tr { transition: background-color 160ms cubic-bezier(0.25,1,0.5,1); }
.sb-scope .sb-p-sc-table tbody tr.is-on td, .sb-scope .sb-p-sc-table tbody tr.is-on th { background: var(--sb-orange-glow-soft); }
.sb-scope .sb-p-sc-table tbody tr.is-on .sb-p-sc-part { color: var(--sb-orange-ink); }

/* ==========================================================================
   BASCULE SUR LE MATCH / PAR 40 MINUTES
   Les valeurs se croisent, les lignes se replacent. Le deplacement est joue
   en FLIP : on mesure, on reordonne, on inverse, on relache.
   ========================================================================== */
/* Les onglets de l'application : texte, filet orange sous l'actif. */
.sb-scope .sb-p-tabs { display: flex; gap: var(--sb-space-6); border-bottom: 1px solid var(--sb-border-medium);
  overflow-x: auto; margin-bottom: var(--sb-space-6); }
.sb-scope .sb-p-tab { position: relative; background: none; border: 0; cursor: pointer; font: inherit;
  font-weight: 600; font-size: var(--sb-text-md); color: var(--sb-text-secondary);
  padding: var(--sb-space-3) 2px; min-height: 44px; white-space: nowrap; }
.sb-scope .sb-p-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--sb-orange); transform: scaleX(0);
  transition: transform 200ms cubic-bezier(0.25,1,0.5,1); }
.sb-scope .sb-p-tab.is-on { color: var(--sb-text-primary); }
.sb-scope .sb-p-tab.is-on::after { transform: none; }
.sb-scope .sb-p-panel[hidden] { display: none; }
@keyframes sb-p-panelin{ from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.sb-scope .sb-p-panel { animation: sb-p-panelin 190ms cubic-bezier(0.25,1,0.5,1); }

/* La preuve chiffree du hero : trois faits du match, en mono. */
.sb-scope .sb-p-proof { display: flex; flex-wrap: wrap; gap: var(--sb-space-2) var(--sb-space-6);
  list-style: none; margin: 0; padding: var(--sb-space-4) 0 0; border-top: 1px solid var(--sb-border-medium); }
.sb-scope .sb-p-proof li { display: flex; align-items: baseline; gap: 7px; font-size: var(--sb-text-sm); color: var(--sb-text-secondary); }
.sb-scope .sb-p-proof b { font-family: var(--sb-font-stat); font-weight: 700; font-size: var(--sb-text-xl); color: var(--sb-text-primary); }

/* Le bouton d'action fixe sur mobile, point 3 de la checklist de livraison.
   Il s'efface quand le hero ou le formulaire sont a l'ecran. */
.sb-scope .sb-p-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--sb-z-sticky);
  display: none; padding: 10px var(--sb-space-4) calc(10px + env(safe-area-inset-bottom));
  background: rgba(245,241,233,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--sb-border-medium);
  transition: transform 240ms cubic-bezier(0.25,1,0.5,1); }
.sb-scope .sb-p-sticky.is-off { transform: translateY(110%); }
@media (max-width: 900px){
  .sb-scope .sb-p-sticky { display: block; }
  .sb-scope.sb-site { padding-bottom: 74px; }
  .sb-scope .sb-p-tabs { gap: var(--sb-space-4); }}
@media (prefers-reduced-motion: reduce){
  .sb-scope .sb-p-tab::after, .sb-scope .sb-p-sticky { transition: none; }
  .sb-scope .sb-p-panel { animation: none; }}

.sb-scope .sb-p-sit-head { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--sb-space-4); }
.sb-scope .sb-p-switch { display: inline-flex; padding: 3px; border-radius: var(--sb-radius-pill);
  background: var(--sb-bg-card-flat); border: 1px solid var(--sb-border-subtle); }
.sb-scope .sb-p-switch-btn { border: 0; background: none; cursor: pointer; font: inherit;
  font-size: var(--sb-text-sm); font-weight: 600; color: var(--sb-text-secondary);
  padding: 0 var(--sb-space-5); min-height: 36px; border-radius: var(--sb-radius-pill);
  transition: background-color 180ms cubic-bezier(0.25,1,0.5,1), color 180ms cubic-bezier(0.25,1,0.5,1); }
.sb-scope .sb-p-switch-btn.is-on { background: var(--sb-bg-card-elevated); color: var(--sb-text-primary);
  box-shadow: var(--sb-shadow-sm); }
.sb-scope .sb-p-v { display: inline-block; transition: opacity 130ms cubic-bezier(0.25,1,0.5,1); }
.sb-scope .sb-p-v.is-swap { opacity: 0; }
.sb-scope #sitTable tbody tr.is-first td, .sb-scope #sitTable tbody tr.is-first th { background: var(--sb-orange-glow-soft); }
.sb-scope #sitTable tbody tr.is-first .sb-p-rang { color: var(--sb-orange-ink); font-weight: 700; }
.sb-scope #sitTable tbody tr { will-change: auto; }

/* Carte joueur : elle est faite pour etre telechargee et postee. Un leger
   relief au pointeur, plafonne a 6 degres, et rien du tout au clavier. */
.sb-scope .sb-p-playercard { transition: transform 320ms cubic-bezier(0.25,1,0.5,1), box-shadow 320ms cubic-bezier(0.25,1,0.5,1); transform-style: preserve-3d; }
.sb-scope .sb-p-playercard.is-tilt { box-shadow: 0 30px 64px -18px rgba(28,22,16,.28); }
.sb-scope .sb-p-pc-sheen { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 2;
  background: radial-gradient(38% 46% at var(--sx,50%) var(--sy,0%), rgba(255,255,255,.55), transparent 68%);
  opacity: 0; transition: opacity 320ms cubic-bezier(0.25,1,0.5,1); }
.sb-scope .sb-p-playercard.is-tilt .sb-p-pc-sheen { opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .sb-scope .sb-p-zone, .sb-scope .sb-p-dot, .sb-scope .sb-p-tip, .sb-scope .sb-p-v, .sb-scope .sb-p-switch-btn, .sb-scope .sb-p-playercard, .sb-scope .sb-p-pc-sheen, .sb-scope .sb-p-sc-table tbody tr { transition: none; }
  .sb-scope .sb-p-court.is-focus .sb-p-dot.is-on { transform: none; }}
.sb-scope .sb-p-sc-legende .sb-p-sc-dot { margin: 0; }

/* La sous-ligne « /40 min » de l'onglet Situations : meme ligne, en retrait,
   en italique, sur un fond plus pale. Elle appartient a la ligne du dessus. */
.sb-scope .sb-p-sit-norm td, .sb-scope .sb-p-sit-norm th { background: var(--sb-bg-card-flat); color: var(--sb-text-secondary);
  border-bottom: 1px solid var(--sb-border-medium); padding-top: var(--sb-space-2);
  padding-bottom: var(--sb-space-2); }
.sb-scope .sb-p-sit-norm th span { font-style: italic; font-size: var(--sb-text-sm); }
.sb-scope .sb-table tbody tr.sb-p-sit-norm:hover td, .sb-scope .sb-table tbody tr.sb-p-sit-norm:hover th { background: var(--sb-bg-card-flat); }
@media (max-width: 900px){
  .sb-scope .sb-p-sc-corps { grid-template-columns: 1fr; }
  .sb-scope .sb-p-sc-table { border-left: 0; border-top: 1px solid var(--sb-border-subtle); }
  .sb-scope .sb-p-sc-kpis { gap: var(--sb-space-6); }}
.sb-scope .sb-p-court .sb-p-line { fill: none; stroke: var(--sb-viz-axis); stroke-width: 2; }
.sb-scope .sb-p-legend { display: flex; gap: var(--sb-space-6); flex-wrap: wrap; }
.sb-scope .sb-p-legend-item { display: inline-flex; align-items: center; gap: var(--sb-space-2); font-size: var(--sb-text-sm); color: var(--sb-text-secondary); }

.sb-scope .sb-p-faq-split { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: var(--sb-space-10); align-items: start; }
.sb-scope .sb-p-faq { border-top: 1px solid var(--sb-border-medium); }
.sb-scope .sb-p-faq details { border-bottom: 1px solid var(--sb-border-medium); }
.sb-scope .sb-p-faq summary { cursor: pointer; list-style: none; padding: var(--sb-space-5) 0; font-weight: 600; font-size: var(--sb-text-md);
  display: flex; justify-content: space-between; gap: var(--sb-space-4); align-items: center; min-height: 44px; }
.sb-scope .sb-p-faq summary::-webkit-details-marker { display: none; }
.sb-scope .sb-p-faq summary::after { content: ''; width: 14px; height: 14px; flex: none;
  background-color: var(--sb-text-secondary);
  -webkit-mask: var(--sb-p-plus) no-repeat center / contain;
          mask: var(--sb-p-plus) no-repeat center / contain;
  transition: transform var(--sb-duration-base) var(--sb-ease-standard); }
.sb-scope .sb-p-faq details[open] summary::after { transform: rotate(45deg); background-color: var(--sb-orange-ink); }
.sb-scope { --sb-p-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8V11.2M.8 6H11.2' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce){ .sb-scope .sb-p-faq summary::after { transition: none; }}
.sb-scope .sb-p-faq details > div { padding-bottom: var(--sb-space-5); max-width: 62ch; color: var(--sb-text-secondary); }

/* Le tarif ne se centre pas. Deux cases inegales, separees par un filet,
   comme une ligne de la feuille. */
.sb-scope .sb-p-tarif { display: grid; grid-template-columns: 1.5fr 1fr; }
.sb-scope .sb-p-tarif-main { padding: var(--sb-space-10); }
.sb-scope .sb-p-tarif-prix { padding: var(--sb-space-10); border-left: 1px solid var(--sb-border-subtle);
  background: var(--sb-orange-glow-soft); justify-content: center;
  border-radius: 0 var(--sb-radius-2xl) var(--sb-radius-2xl) 0; }
.sb-scope .sb-p-tarif-val { font-family: var(--sb-font-stat); font-size: var(--sb-text-4xl); font-weight: 700; }
@media (max-width: 900px){
  .sb-scope .sb-p-tarif { grid-template-columns: 1fr; }
  .sb-scope .sb-p-tarif-main, .sb-scope .sb-p-tarif-prix { padding: var(--sb-space-8); }
  .sb-scope .sb-p-tarif-prix { border-left: 0; border-top: 1px solid var(--sb-border-subtle);
    border-radius: 0 0 var(--sb-radius-2xl) var(--sb-radius-2xl); }}

.sb-scope .sb-p-limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sb-space-8); }
.sb-scope .sb-p-limit { padding-top: var(--sb-space-4); border-top: 1px solid var(--sb-border-strong); }
.sb-scope .sb-p-limit dt { font-weight: 700; margin-bottom: var(--sb-space-2); }
.sb-scope .sb-p-limit dd { margin: 0; color: var(--sb-text-secondary); }

/* Formulaire d'acces. En Elementor : widget Formulaire, un champ par ligne
   de la grille, honeypot active dans Actions apres envoi. */
.sb-scope .sb-p-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sb-space-4); }
.sb-scope .sb-p-form-full { grid-column: 1 / -1; }
/* background-color et non le raccourci background : le raccourci reinitialise
   background-repeat et fait carreler la chevronne du select. */
.sb-scope .sb-p-ink .sb-input, .sb-scope .sb-p-ink .sb-select { background-color: rgba(250,248,243,.06); color: var(--sb-text-invert);
  border-color: rgba(250,248,243,.42); min-height: 44px; }
.sb-scope .sb-p-ink .sb-input::placeholder { color: rgba(250,248,243,.5); }
.sb-scope .sb-p-ink .sb-input:hover, .sb-scope .sb-p-ink .sb-select:hover { border-color: rgba(250,248,243,.7); }
.sb-scope .sb-p-ink .sb-field-label { color: var(--sb-text-invert); }
.sb-scope .sb-p-ink .sb-field-hint { color: rgba(250,248,243,.62); }
.sb-scope .sb-p-ink .sb-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23faf8f3' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); }
.sb-scope .sb-p-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sb-scope .sb-p-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sb-space-8); }
.sb-scope .sb-p-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.sb-scope .sb-p-footer a { color: rgba(250,248,243,.72); text-decoration: none; font-size: var(--sb-text-sm);
  display: inline-flex; align-items: center; min-height: 40px; }
.sb-scope .sb-p-footer a:hover { color: var(--sb-text-invert); text-decoration: underline; }

/* ==========================================================================
   CARTE JOUEUR, REconstruite d'apres la vraie carte de l'application.
   Couches, de l'arriere vers l'avant : parquet floute, bande pervenche,
   joueur detoure avec son chiffre, nom en capitales par-dessus, stats.
   Le nom et les stats restent du vrai texte : rien n'est grave dans l'image.
   Trois transitions, et pas une de plus :
   1. l'entree, une fois, quand la carte arrive a l'ecran : la carte se monte
      dans l'ordre ou l'application la genere ;
   2. la bascule Saison / MVP, un retournement de carte ;
   3. le relief au pointeur, deja en place.
   ========================================================================== */
.sb-scope .sb-p-pc-zone { display: flex; flex-direction: column; }
.sb-scope .sb-p-pc-switch { align-self: flex-end; margin-bottom: var(--sb-space-4); }

.sb-scope .sb-p-playercard { position: relative; border-radius: var(--sb-radius-2xl);
  border: 1.5px solid rgba(242,98,31,.55);
  box-shadow: 0 0 0 4px rgba(242,98,31,.13), var(--sb-shadow-xl);
  perspective: 1200px; background: transparent; }

.sb-scope .sb-p-pc-flip { position: relative; transform-style: preserve-3d;
  transition: transform 460ms cubic-bezier(0.22,1,0.36,1); }
.sb-scope .sb-p-pc-flip.is-mvp { transform: rotateY(180deg); }
.sb-scope .sb-p-pc-face { border-radius: calc(var(--sb-radius-2xl) - 2px); overflow: hidden;
  padding: var(--sb-space-5); display: flex; flex-direction: column;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background:
    linear-gradient(168deg, rgba(253,247,239,.9) 0%, rgba(246,231,214,.82) 55%, rgba(240,217,194,.86) 100%),
    url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHCAkIBgoJCAkMCwoMDxoRDw4ODx8WGBMaJSEnJiQhJCMpLjsyKSw4LCMkM0Y0OD0/QkNCKDFITUhATTtBQj//2wBDAQsMDA8NDx4RER4/KiQqPz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz//wAARCAKAAPADASIAAhEBAxEB/8QAHAABAQEAAwEBAQAAAAAAAAAAAAECAwQFBgcI/8QAKBABAQACAgICAgEDBQAAAAAAAAECEQMEITEFEjJBIhMUURUjM0Ji/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAECA//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAwDAQACEQMRAD8A/YY1GWo4NVVRWogA0ACoAAAAAAAAAAAAAAAAAAAAAA42oxG45NVVRWogA0AAgAAAAAoAAAAAAAAAAAAAAAA4o1GY1HJutKgsZUBoAFAAAAAAAAAAAAAAAAAAAAAAHDGozGo5xutRUiqwoDQAAAAAAAAAAAAAKACAAAAAAoAIOBqMNRhutxpmLFZrQiqgAoAAAAAAAAAAAAAAAAAAAAAA68ajEajm6VuNRiNRWa0rMVplQFAAAAAAAAABAAAAUAAAAAAAAdaNRhqObrW40zGlYqrEitMqAAAoAAAAAiAAAACgAAKAAAAAAOq1GI1HJ2rcajEaisVqNMxWmVAVFEAVAAAAAQBAFEUBUFFAAAUAAARB1Y1GI1HJ2rcajEajTNbVmKrDQiqgAoAIAAAACKAgqAogCgAKgoogAAg6jUZWObvW4sZixpmtxWYsVmtKyqsqqAKgCCooAAAACKAgAAAoqAiiAKgCupGozGo5u1WNRmNRWasaiRY0yqooiiKqAAAAgqAKIAogAAKgACgCCgIAg6sajEajEdq3FZjUaZrUVmNDKqyqoogCgKiiAKAAAIIqCgKCKACouwENiggiDqxqMxuOcd61FIrTFFBWRUUBQEUBQAEAAFQBUAAAA2AGxAVU2gGLtBEVwRqMxYxHStxphqVpmtCCo0ICNDJsMaGdqamLs2gCiAKIoAAAAAACKgCKgoIA4Goy1GHWtRYkWKzVioqsgAgAKAAoCoCgAAKAIKiA0iAAgKIJUUTZWbRWI1EixlutNMtKyKKrIAIAAAAogCiAKIAogCgAgoDIoCJVSis1mrWaKRqMRqMt1ppmLFZVUFZUAAABUABQEFAFAQFFQBAVBBVQRAZq1KNM1mtVmgy1EWMRutRUitM1oBUUAQAAVARRAFBAUQBoZUFQAAAQAVKioKlZrVSgwsRqMRurFIsaZqqiqyAAAAAAAAAACgAoIAKAACKiCIqCpUq1KK41jLUYjdajTMVploFVANKIgoCCggKAmlFBAAVAUEBAUAEUBkUFZRpNCuFqJGow3VixI00wsVFVFEBFEAUBQBRABBBRRBQEFAAAAARFBURRBwRYkajLpVaSKrNUF0qAoqAoIAAAAAAAAAAAoIKAgoIhpdAqaTTQDrNRI1GXSrFgsVlQVWQUUQUBBRBBRRFAQBQQUBAAAAUAAAEFQHXjUSLGHWtRqJGo0xRQVkFAQVAAAAAFRQABAFBBQVBQAAQRUAAB12oixl1rUaZjTTFVUUQAVAABFBQUQRQEAQFEFFEAUBAAAAARRR11iLGHWtRpI1GmKKiqgCiAAAAAIACggoCCgIoAAgKAAM26ceXLILjmHVvYxn7T+6x/yGNtRlqMulajUZixWKqoqoACAoCKAAAAAAoAAAigIAAlVnP0Dr8/L9ZXj9vvTDfl2/kOT6418Z8v3LhcvI09Tl+Wkv5OH/WP/T4js/JZfe/yceHyGV/a4j9vajLUYdK1GozGorFFBUUAQAAAUAAFBAAAAAEUAABjk9Nscn40I8P5S/wr8++dzsuT9A+V/Cvzv573ksV8j2OS3krm69t06nYv+5XY6ucmmkf0M1GWo5OlajTMaVlQVWQBQAAAAAAAAAAAAAAVFAY5PxrTOf40I8L5X8K/O/nveT9E+V/Cvzz57HzkRXxPZ/5KvBbtvscdvJXN1uvbrw0j+hm4w3HJ0rUVIrTKqijIAoAAAAAAAAAAAAAAAAM5+mks8BHi/JYbwr4X5rrXK5eH6N2+L7SvnO/0Pvb4FfmnJ0beT073T6F8eH0+XxP8/wAXa6/xn1/6qPtm4w3HNutRUitM1VRRkAUAAAAAAAAAAAAAAAAAAceeH2jq8nWmX6d5NC68v+yx36cmPUk/T0PrDQOBuMNRhutxWY00yqoDKgKAAAAAAAAAAAAAAAAAAAAAAOu1GWoxHStRqMxqKzVAVFEFRRAFEAUQBRAFEAAAUQBRAFQAAAAAcDUZajEda1FiRYrFaAVABUAAAAAAAAAAAAAAAAAAAAAAcDUZajDrWoqT2qsVVRVQAUAAAAAAAAAAAAAAAAAAAAAAcDUZajEdKrTLSsgCoGwVAABUVBFQAVAAAABQAAAQAFAABUEHE1GWozHStT2qT2qsVQVUNGgUNAAAAgtYyoLs24rmn3Fc2zbh+y/YRy7HD92pkDlElaA0aADRoANGgA0aBBwNRlYzHStz2rMaViqqKqACoAbFBNmwK483IxkDgpI5LISQGNI5dH1BwtYtfRZiDeLkjEa2CifY+0BRNrtAAEAAcCxFjMda1GmY00xVVFEAFRLXHnnprO+HR7HJZKK5cueT9mPYl/bxefs2X2xxdvd9g+inLLGcuWR53H2N4+3Hz9nU9g72XYkvtJ2Jv28Dl7ur7Zw7277B9Phyy/tz43bwur2vtry9bg5NyA7OjSwoMZZacGfNr9rzZajzexy2bB3L2ZP2k7U/y8Pl7Nl9uKdu79g+mw55f27GGe3z/W7Fys8vX6+e5Ad2CYqgACOBYixmOtajTMaaYqqiiACjjznh53bl1XqWOl2sPFB8x3LZa6vFyWZO/wB/DzXm4zWaj1eHlv1cHa5rq+U4r/F1+1fCDz+fmv2vlx8fNft7Tlm6xhPKj3ehzXc8vo+pybxj5Po3Vj6PqZ/xiD2Mc5pbnHS/q6i48m6Dm5fMeX2sL5epPMdTtYfxoPne1uWunLfs9DuzzXS48d5g9Hoy2x9D1Z4jyOhx+nu8GOoDsY+lIIAAj//Z") center / cover no-repeat;
  }
.sb-scope .sb-p-pc-face-b { position: absolute; inset: 0; transform: rotateY(180deg); visibility: hidden;
  transition: visibility 0s 220ms; }
.sb-scope .sb-p-pc-flip.is-mvp .sb-p-pc-face-b { visibility: visible; }
.sb-scope .sb-p-pc-flip.is-mvp .sb-p-pc-face-a { visibility: hidden; transition: visibility 0s 220ms; }

.sb-scope .sb-p-pc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sb-space-4); }
.sb-scope .sb-p-pc-marque { font-family: var(--sb-font-title); font-weight: 700; font-size: var(--sb-text-xl);
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--sb-text-primary); }
.sb-scope .sb-p-pc-eva { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px;
  border-radius: var(--sb-radius-pill); background: var(--sb-orange-deep); color: #fff;
  /* pastille de 13 px : le degrade plafonne a 3,21:1, l'orange profond donne 4,77:1,
     comme le petit bouton primaire du systeme */
  font-size: var(--sb-text-xs); font-weight: 700; letter-spacing: var(--sb-tracking-label); }
.sb-scope .sb-p-pc-eva b { font-family: var(--sb-font-stat); font-size: var(--sb-text-md); }

.sb-scope .sb-p-pc-scene { position: relative; margin-top: var(--sb-space-2); }
.sb-scope .sb-p-pc-band { position: absolute; left: calc(-1 * var(--sb-space-5)); right: calc(-1 * var(--sb-space-5));
  top: 11%; height: 10px; background: var(--sb-blue); transform-origin: left center; }
.sb-scope .sb-p-pc-photo { position: relative; display: block; width: min(78%, 300px); height: auto;
  margin: 0 auto; filter: drop-shadow(0 10px 22px rgba(28,22,16,.16)); }

.sb-scope .sb-p-pc-id { position: relative; margin-top: -17%; text-align: center; }
.sb-scope .sb-p-pc-nom { margin: 0; font-family: var(--sb-font-title); font-weight: 700;
  font-size: clamp(2rem, 12cqw, 2.9rem); line-height: .9; letter-spacing: -0.015em;
  text-transform: uppercase; color: var(--sb-text-primary); text-wrap: balance; }
.sb-scope .sb-p-pc-poste { margin: var(--sb-space-3) 0 0; font-weight: 800; font-size: var(--sb-text-sm);
  letter-spacing: .04em; text-transform: uppercase; }
.sb-scope .sb-p-pc-saison { margin: 3px 0 0; font-size: var(--sb-text-2xs); font-weight: 700;
  letter-spacing: var(--sb-tracking-label); text-transform: uppercase; color: var(--sb-text-secondary); }

.sb-scope .sb-p-pc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sb-space-2);
  margin-top: var(--sb-space-5); padding-top: var(--sb-space-4);
  border-top: 1px solid rgba(28,26,23,.18); }
.sb-scope .sb-p-pc-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sb-scope .sb-p-pc-lab { font-family: var(--sb-font-stat); font-size: var(--sb-text-2xs);
  letter-spacing: var(--sb-tracking-label); color: var(--sb-text-secondary); }
.sb-scope .sb-p-pc-val { font-family: var(--sb-font-stat); font-weight: 700; font-size: var(--sb-text-2xl);
  font-variant-numeric: tabular-nums; }

/* L'entree : la carte se monte dans l'ordre de sa generation.
   Etats initiaux poses par JS (classe sb-p-pc-wait), animations au declenchement. */
.sb-scope .sb-p-pc-wait .sb-p-pc-band, .sb-scope .sb-p-pc-wait .sb-p-pc-photo, .sb-scope .sb-p-pc-wait .sb-p-pc-id, .sb-scope .sb-p-pc-wait .sb-p-pc-stats, .sb-scope .sb-p-pc-wait .sb-p-pc-eva { opacity: 0; }
@keyframes sb-pc-band{ from { transform: scaleX(0); opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes sb-pc-rise{ from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sb-pc-rise2{ from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sb-pc-pop{ from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
.sb-scope .sb-p-pc-in .sb-p-pc-band { animation: sb-pc-band 320ms cubic-bezier(0.22,1,0.36,1) 40ms both; }
.sb-scope .sb-p-pc-in .sb-p-pc-photo { animation: sb-pc-rise 420ms cubic-bezier(0.22,1,0.36,1) 140ms both; }
.sb-scope .sb-p-pc-in .sb-p-pc-id { animation: sb-pc-rise2 340ms cubic-bezier(0.22,1,0.36,1) 300ms both; }
.sb-scope .sb-p-pc-in .sb-p-pc-stats { animation: sb-pc-rise2 300ms cubic-bezier(0.22,1,0.36,1) 460ms both; }
.sb-scope .sb-p-pc-in .sb-p-pc-eva { animation: sb-pc-pop 240ms cubic-bezier(0.22,1,0.36,1) 600ms both; }

@media (prefers-reduced-motion: reduce){
  .sb-scope .sb-p-pc-flip { transition: none; }
  .sb-scope .sb-p-pc-face-b, .sb-scope .sb-p-pc-flip.is-mvp .sb-p-pc-face-a { transition: none; }
  .sb-scope .sb-p-pc-in .sb-p-pc-band, .sb-scope .sb-p-pc-in .sb-p-pc-photo, .sb-scope .sb-p-pc-in .sb-p-pc-id, .sb-scope .sb-p-pc-in .sb-p-pc-stats, .sb-scope .sb-p-pc-in .sb-p-pc-eva { animation: none; }}

/* Pied de tableau : les totaux ne sont pas des lignes de joueur. */
.sb-scope .sb-table tfoot th, .sb-scope .sb-table tfoot td { border-top: 2px solid var(--sb-border-strong);
  font-weight: 700; background: var(--sb-bg-card-flat); text-align: left; }
.sb-scope .sb-table tfoot tr:not(:first-child) th, .sb-scope .sb-table tfoot tr:not(:first-child) td {
  border-top: 1px solid var(--sb-border-subtle); font-weight: 400; color: var(--sb-text-secondary); }
.sb-scope .sb-table tfoot td.sb-num, .sb-scope .sb-table tfoot th.sb-num { text-align: right; }

.sb-scope .sb-p-todo { outline: 2px dashed var(--sb-orange); outline-offset: 4px; }
.sb-scope .sb-p-todo-tag { display: inline-block; background: var(--sb-orange-glow-soft); color: var(--sb-orange-ink);
  font-size: var(--sb-text-2xs); font-weight: 700; letter-spacing: var(--sb-tracking-label); text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--sb-radius-xs); }

/* Une seule sequence orchestree sur toute la page, a l'arrivee.
   Entree 340 ms, decalage 45 ms : les valeurs recommandees pour une liste. */
@keyframes sb-p-rise{ from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sb-scope .sb-p-rise > * { animation: sb-p-rise 340ms var(--sb-ease-entrance) both; }
.sb-scope .sb-p-rise > *:nth-child(1) { animation-delay: 30ms; }
.sb-scope .sb-p-rise > *:nth-child(2) { animation-delay: 75ms; }
.sb-scope .sb-p-rise > *:nth-child(3) { animation-delay: 120ms; }
.sb-scope .sb-p-rise > *:nth-child(4) { animation-delay: 165ms; }
.sb-scope .sb-p-rise > *:nth-child(5) { animation-delay: 210ms; }
@media (prefers-reduced-motion: reduce){ .sb-scope .sb-p-rise > * { animation: none; }}

/* Points de rupture systematiques : 1440 par defaut, 1024 tablette, 900 pliage
   des grilles a deux colonnes, 768 mobile large, 375 verifie separement. */
@media (max-width: 1024px){
  .sb-scope .sb-p-steps { grid-template-columns: 1fr 1fr; }
  .sb-scope .sb-p-ratios { grid-template-columns: repeat(3, 1fr); row-gap: var(--sb-space-8); }
  .sb-scope .sb-p-limits { grid-template-columns: 1fr 1fr; }
  .sb-scope .sb-p-footer { grid-template-columns: 1.6fr 1fr 1fr; }}
@media (max-width: 900px){
  .sb-scope .sb-p-hero, .sb-scope .sb-p-split, .sb-scope .sb-p-split-6040, .sb-scope .sb-p-steps, .sb-scope .sb-p-limits, .sb-scope .sb-p-faq-split, .sb-scope .sb-p-form-grid { grid-template-columns: 1fr; gap: var(--sb-space-8); }
  .sb-scope .sb-p-ratios { grid-template-columns: repeat(2, 1fr); }
  .sb-scope .sb-p-footer { grid-template-columns: 1fr 1fr; }
  .sb-scope .sb-p-section { padding-block: var(--sb-space-16); }
  .sb-scope .sb-p-ink.sb-p-section { padding-block: var(--sb-space-16); }
  .sb-scope .sb-p-after-ink { padding-top: var(--sb-space-16); }
  .sb-scope .sb-p-note { position: static; transform: none; max-width: none; margin-top: var(--sb-space-5); }
  .sb-scope .sb-p-drop-zone { padding-bottom: 108px; }
  .sb-scope .sb-p-note svg { display: none; }
  .sb-scope .sb-p-form-grid { gap: var(--sb-space-4); }}

/* --------------------------------------------------------------------------
   RACCORD ELEMENTOR
   Les <section>, le <main>, le <header>, le <footer> et la dalle sont des
   conteneurs Elementor. Elementor leur impose display:flex et une largeur de
   100 %. Ces quatre regles rendent la main a la mise en page du prototype.
   -------------------------------------------------------------------------- */
.sb-scope.e-con, .sb-scope .e-con.sb-p-main, .sb-scope .e-con.sb-p-section,
.sb-scope .e-con.sb-p-section-tight, .sb-scope .e-con.sb-p-dalle { display: block; }
.sb-scope .e-con.sb-p-section, .sb-scope .e-con.sb-p-section-tight,
.sb-scope .e-con.sb-p-dalle, .sb-scope .e-con.sb-p-main,
.sb-scope.e-con { padding-inline: 0; }

/* Le widget Editeur de texte insere deux div entre le conteneur et le
   balisage. Dans le bandeau, ces deux div couperaient la rangee flex en un
   seul enfant : display:contents les rend transparents a la mise en page. */
.sb-scope .sb-header > .sb-p-passthrough,
.sb-scope .sb-header > .sb-p-passthrough > .elementor-widget-container { display: contents; }
/* La largeur des widgets reste celle d'Elementor : 100 % dans une colonne,
   automatique dans une rangee. La forcer ici ecrasait les libelles du
   bandeau et se substituait au reglage Avance -> Largeur. */
.sb-scope .e-con.sb-p-split > .elementor-widget,
.sb-scope .e-con.sb-p-split > .e-con { min-width: 0; }
.sb-scope .e-con.sb-p-align-center { align-items: center; }
.sb-scope .sb-p-footer-band { border-top: 1px solid rgba(250, 248, 243, .14); }

/* Le formulaire d'acces est le widget natif : il est le second enfant de la
   grille, la ou le prototype posait un <form>. Meme largeur, meme gouttiere. */
.sb-scope .sb-p-ink .elementor-widget-form.elementor-widget .elementor-field-group > label,
.sb-scope .sb-p-ink .elementor-field-group .elementor-field-label {
  color: var(--sb-text-invert); font-size: var(--sb-text-sm);
  font-weight: var(--sb-weight-semi); margin-bottom: var(--sb-space-2); }
.sb-scope .sb-p-ink .elementor-field-group .elementor-field-textual {
  background-color: rgba(250, 248, 243, .06); color: var(--sb-text-invert);
  border: 1px solid rgba(250, 248, 243, .42); border-radius: var(--sb-radius-md);
  min-height: 44px; padding-inline: var(--sb-space-4); }
.sb-scope .sb-p-ink .elementor-field-group .elementor-field-textual::placeholder {
  color: rgba(250, 248, 243, .5); }
.sb-scope .sb-p-ink .elementor-field-group .elementor-field-textual:hover {
  border-color: rgba(250, 248, 243, .7); }
.sb-scope .sb-p-ink .elementor-field-group .elementor-field-textual:focus-visible {
  outline: 2px solid var(--sb-orange-bright); outline-offset: 2px; }
.sb-scope .sb-p-ink .elementor-mark-required .elementor-field-label:after {
  color: var(--sb-orange-bright); }
.sb-scope .sb-p-ink .elementor-message { color: var(--sb-text-invert); }

/* ==========================================================================
   CORRECTIFS DE RACCORD
   ========================================================================== */
.sb-scope .e-con.sb-p-dalle { width: auto; padding-block: 0; }
.sb-scope .e-con.sb-p-main, .sb-scope.e-con { padding-block: 0; }
/* La direction des conteneurs en ligne est reglee widget par widget
   (Mise en page -> Direction), pas ici : sinon le panneau ne peut plus la changer. */

.sb-scope a.sb-btn-primary, .sb-scope a.sb-btn-danger, .sb-scope button.sb-btn-primary { color: #ffffff; }
.sb-scope a.sb-btn-secondary, .sb-scope a.sb-btn-ghost, .sb-scope button.sb-btn-secondary { color: var(--sb-text-primary); }
.sb-scope a.sb-btn-ink { color: var(--sb-text-invert); }
.sb-scope a.sb-nav-link { color: var(--sb-text-secondary); }
.sb-scope a.sb-nav-link:hover, .sb-scope a.sb-nav-link:focus-visible { color: var(--sb-text-primary); }
.sb-scope .sb-p-tabs { overflow-y: hidden; }

/* ==========================================================================
   ECHELLE TYPO
   Les Styles du theme dimensionnent chaque h1..h6 a une classe de plus que
   les classes du systeme. Une classe de plus les remet devant. Seule la
   taille est reprise : interlignage et approche restent ceux de .sb-scope h*.
   ========================================================================== */
.sb-scope .sb-display { font-size: var(--sb-text-6xl); }
.sb-scope .sb-h1 { font-size: var(--sb-text-5xl); }
.sb-scope .sb-h2 { font-size: var(--sb-text-4xl); }
.sb-scope .sb-h3 { font-size: var(--sb-text-3xl); }
.sb-scope .sb-h4 { font-size: var(--sb-text-2xl); }
.sb-scope .sb-h5 { font-size: var(--sb-text-xl); }
.sb-scope .sb-h6 { font-size: var(--sb-text-lg); }

/* ==========================================================================
   ETATS DES BOUTONS NATIFS ET LISTE DEROULANTE
   ========================================================================== */
.sb-scope .sb-p-tab:hover, .sb-scope .sb-p-tab:focus,
.sb-scope .sb-p-zone-btn:hover, .sb-scope .sb-p-zone-btn:focus {
  background-color: transparent; border-radius: 0; }
.sb-scope .sb-p-zone-btn:hover, .sb-scope .sb-p-zone-btn:focus { color: inherit; }
.sb-scope .sb-p-tab:hover, .sb-scope .sb-p-tab:focus-visible { color: var(--sb-text-primary); }
.sb-scope .sb-p-switch-btn:hover, .sb-scope .sb-p-switch-btn:focus {
  background-color: transparent; color: var(--sb-text-secondary); }
.sb-scope .sb-btn-secondary:hover, .sb-scope .sb-btn-secondary:focus {
  background: #fffdfa; border-color: var(--sb-border-input); color: var(--sb-text-primary); }
.sb-scope .sb-p-panel { animation: none; }
.sb-scope .sb-p-ink .elementor-widget-form.elementor-widget .elementor-field-group select.elementor-field-textual option {
  background-color: var(--sb-bg-card-elevated); color: var(--sb-text-primary); }

/* ==========================================================================
   ANNEAU DE FOCUS
   Le reset du theme repeint l'anneau en noir carre avec un halo blanc et
   passe devant celui du systeme. Une classe de plus le lui rend.
   ========================================================================== */
.sb-scope a:focus-visible, .sb-scope button:focus-visible,
.sb-scope summary:focus-visible, .sb-scope [tabindex]:focus-visible,
.sb-scope input:focus-visible, .sb-scope select:focus-visible,
.sb-scope textarea:focus-visible {
  outline: var(--sb-focus-width) solid var(--sb-border-focus);
  outline-offset: var(--sb-focus-offset); box-shadow: none; }
.sb-scope .sb-p-tab:focus-visible, .sb-scope .sb-p-switch-btn:focus-visible,
.sb-scope .sb-p-zone-btn:focus-visible { border-radius: var(--sb-radius-sm); }
.sb-scope .sb-p-ink a:focus-visible, .sb-scope .sb-p-ink button:focus-visible,
.sb-scope .sb-p-ink input:focus-visible, .sb-scope .sb-p-ink select:focus-visible,
.sb-scope .sb-p-ink textarea:focus-visible { outline-color: var(--sb-orange-bright); }

/* ==========================================================================
   PONT DES WIDGETS
   La page est batie en widgets natifs. Elementor pose ses classes sur
   l'enveloppe du widget et non sur la balise interieure. Ce bloc reconnecte
   les composants du systeme a ce que le widget produit reellement.
   Aucune valeur n'est reecrite ici : tout passe par les tokens.
   ========================================================================== */

/* 1. L'enveloppe de contenu de l'editeur de texte disparait de la mise en
      page : sans ca, une grille ou une rangee flex verrait un seul enfant. */
.sb-scope .elementor-widget-text-editor > .elementor-widget-container { display: contents; }

/* 2. Widget Titre. La feuille du widget cible .elementor-heading-title a deux
      classes et se charge apres celle du kit : il faut une classe de plus. */
.sb-scope .elementor-widget-heading .elementor-heading-title {
  font-family: var(--sb-font-title); font-weight: var(--sb-weight-bold);
  letter-spacing: var(--sb-tracking-title); line-height: var(--sb-leading-tight);
  color: var(--sb-text-primary); text-wrap: balance; margin: 0; }
.sb-scope .elementor-widget-heading.sb-w-display .elementor-heading-title {
  font-size: var(--sb-text-6xl); line-height: var(--sb-leading-display);
  letter-spacing: var(--sb-tracking-display); }
.sb-scope .elementor-widget-heading.sb-w-h1 .elementor-heading-title { font-size: var(--sb-text-5xl); }
.sb-scope .elementor-widget-heading.sb-w-h2 .elementor-heading-title { font-size: var(--sb-text-4xl); }
.sb-scope .elementor-widget-heading.sb-w-h3 .elementor-heading-title { font-size: var(--sb-text-3xl); }
.sb-scope .elementor-widget-heading.sb-w-h4 .elementor-heading-title { font-size: var(--sb-text-2xl); }
.sb-scope .elementor-widget-heading.sb-w-h5 .elementor-heading-title { font-size: var(--sb-text-xl); }
.sb-scope .elementor-widget-heading.sb-w-h6 .elementor-heading-title { font-size: var(--sb-text-lg); }
.sb-scope .sb-p-ink .elementor-widget-heading .elementor-heading-title { color: var(--sb-text-invert); }

/* 3. Widget Bouton : le lien est deux niveaux sous l'enveloppe, et la feuille
      du widget passe apres celle du kit. Meme mecanique, une classe de plus. */
.sb-scope .elementor-widget-button.sb-w-btn .elementor-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sb-space-2); font-family: var(--sb-font-body);
  font-size: var(--sb-text-md); font-weight: var(--sb-weight-bold);
  line-height: 1; letter-spacing: -0.01em; padding: 0 var(--sb-space-5);
  min-height: 40px; min-width: 40px; border: 1px solid transparent;
  border-radius: var(--sb-radius-pill); text-decoration: none; white-space: nowrap;
  background-image: none; box-shadow: none; text-shadow: none;
  transition: background-color var(--sb-duration-fast) var(--sb-ease-standard),
              box-shadow var(--sb-duration-base) var(--sb-ease-standard),
              transform var(--sb-duration-fast) var(--sb-ease-standard),
              border-color var(--sb-duration-fast) var(--sb-ease-standard); }
.sb-scope .elementor-widget-button.sb-w-btn .elementor-button:active { transform: translateY(1px); }
.sb-scope .elementor-widget-button.sb-w-primary .elementor-button {
  background: var(--sb-gradient-btn); color: #ffffff;
  box-shadow: var(--sb-shadow-glow), var(--sb-shadow-inset); }
.sb-scope .elementor-widget-button.sb-w-primary .elementor-button:hover,
.sb-scope .elementor-widget-button.sb-w-primary .elementor-button:focus {
  background: var(--sb-orange-deep); box-shadow: 0 10px 28px -8px var(--sb-orange-glow); }
.sb-scope .elementor-widget-button.sb-w-secondary .elementor-button {
  background: var(--sb-bg-card-elevated); color: var(--sb-text-primary);
  border-color: var(--sb-border-strong); box-shadow: var(--sb-shadow-xs); }
.sb-scope .elementor-widget-button.sb-w-secondary .elementor-button:hover,
.sb-scope .elementor-widget-button.sb-w-secondary .elementor-button:focus {
  border-color: var(--sb-border-input); background: #fffdfa; }
.sb-scope .elementor-widget-button.sb-w-ghost .elementor-button { background: transparent; color: var(--sb-text-primary); }
.sb-scope .elementor-widget-button.sb-w-ghost .elementor-button:hover,
.sb-scope .elementor-widget-button.sb-w-ghost .elementor-button:focus { background: var(--sb-bg-pill-hover); }
.sb-scope .elementor-widget-button.sb-w-ink .elementor-button { background: var(--sb-bg-ink); color: var(--sb-text-invert); }
.sb-scope .elementor-widget-button.sb-w-ink .elementor-button:hover { background: var(--sb-bg-ink-hover); }
.sb-scope .elementor-widget-button.sb-w-sm .elementor-button {
  min-height: 32px; padding: 0 var(--sb-space-4); font-size: var(--sb-text-sm); }
.sb-scope .elementor-widget-button.sb-w-sm.sb-w-primary .elementor-button {
  background: var(--sb-orange-deep); box-shadow: var(--sb-shadow-xs); }
.sb-scope .elementor-widget-button.sb-w-lg .elementor-button {
  min-height: 48px; padding: 0 var(--sb-space-8); font-size: var(--sb-text-lg); }
.sb-scope .elementor-widget-button.sb-w-block,
.sb-scope .elementor-widget-button.sb-w-block .elementor-button-wrapper { width: 100%; }
.sb-scope .elementor-widget-button.sb-w-block .elementor-button { display: flex; width: 100%; }
.sb-scope .elementor-widget-button.sb-w-icon .elementor-button { padding: 0; width: 40px; }

/* 4. Lien de navigation du bandeau, meme mecanique. */
.sb-scope .elementor-widget-button.sb-w-navlink .elementor-button {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 0 var(--sb-space-4); border-radius: var(--sb-radius-pill);
  font-family: var(--sb-font-body); font-size: var(--sb-text-md);
  font-weight: var(--sb-weight-semi); color: var(--sb-text-secondary);
  background: none; background-image: none; box-shadow: none; border: 0;
  text-decoration: none; white-space: nowrap; letter-spacing: 0;
  transition: background-color var(--sb-duration-fast) var(--sb-ease-standard),
              color var(--sb-duration-fast) var(--sb-ease-standard); }
.sb-scope .elementor-widget-button.sb-w-navlink .elementor-button:hover,
.sb-scope .elementor-widget-button.sb-w-navlink .elementor-button:focus {
  background: var(--sb-bg-pill-hover); color: var(--sb-text-primary); }

/* 5. Le panneau d'onglet ouvert se marque par une classe, pas par l'attribut
      hidden : un conteneur Elementor ne porte pas d'attribut arbitraire. */
/* Le panneau d'onglet masque porte l'attribut hidden, comme dans la maquette :
   .sb-p-panel[hidden] du systeme suffit, aucune classe d'etat en plus. */

/* 6. Le widget Image ne doit pas ajouter d'espace sous l'illustration. */
.sb-scope .elementor-widget-image img { display: block; width: 100%; height: auto; }

/* DEBUT UTILITAIRES */
/* ==========================================================================
   UTILITAIRES REPRIS DES STYLES EN LIGNE DU PROTOTYPE
   Un widget ou un conteneur Elementor ne porte pas d'attribut style. Chaque
   style en ligne du prototype devient une classe, une pour une, sans valeur
   nouvelle : ce sont les memes declarations, deplacees.
   Genere par gen/utilitaires.py : ne pas editer a la main.
   ========================================================================== */
.sb-scope .sb-u-01 { text-decoration:none;display:flex;align-items:center;gap:8px;min-height:40px; }
.sb-scope .sb-u-02 { margin-left:var(--sb-space-6); }
.sb-scope .sb-u-03 { margin-left:auto; }
.sb-scope .sb-u-04 { margin:0;text-wrap:balance; }
.sb-scope .sb-u-05 { margin:0; }
.sb-scope .sb-u-06 { padding:var(--sb-space-5); }
.sb-scope .sb-u-07 { margin-bottom:var(--sb-space-3); }
.sb-scope .sb-u-08 { margin:0 0 2px; }
.sb-scope .sb-u-09 { border-radius:var(--sb-radius-md); }
.sb-scope .sb-u-10 { margin-top:var(--sb-space-4);gap:var(--sb-space-4); }
.sb-scope .sb-u-11 { right:-18px;bottom:-92px;text-align:left; }
.sb-scope .sb-u-12 { margin-left:34px;margin-bottom:2px; }
.sb-scope .sb-u-13 { max-width:56ch; }
.sb-scope .sb-u-14 { margin:0;font-family:var(--sb-font-title);letter-spacing:var(--sb-tracking-title);text-wrap:balance; }
.sb-scope .sb-u-15 { align-items:flex-start; }
.sb-scope .sb-u-16 { margin-top:var(--sb-space-4); }
.sb-scope .sb-u-17 { list-style:none;margin:0;padding:0; }
.sb-scope .sb-u-18 { margin:0;color:var(--sb-text-secondary);max-width:44ch; }
.sb-scope .sb-u-19 { padding:var(--sb-space-4); }
.sb-scope .sb-u-20 { width:34px;height:34px;border-radius:var(--sb-radius-sm);background:var(--sb-neutral-bg);display:grid;place-items:center;font-family:var(--sb-font-stat);font-size:10px;font-weight:700;flex:none; }
.sb-scope .sb-u-21 { gap:2px;min-width:0; }
.sb-scope .sb-u-22 { color:var(--sb-text-primary);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sb-scope .sb-u-23 { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sb-space-2); }
.sb-scope .sb-u-24 { margin:var(--sb-space-2) 0 0; }
.sb-scope .sb-u-25 { align-items:flex-end; }
.sb-scope .sb-u-26 { padding:var(--sb-space-6); }
.sb-scope .sb-u-27 { border:0;border-radius:0; }
.sb-scope .sb-u-28 { gap:var(--sb-space-4);margin-top:var(--sb-space-5); }
.sb-scope .sb-u-29 { margin:0 0 var(--sb-space-5);color:var(--sb-text-secondary); }
.sb-scope .sb-u-30 { padding:var(--sb-space-8); }
.sb-scope .sb-u-31 { gap:var(--sb-space-4);margin-bottom:var(--sb-space-8); }
.sb-scope .sb-u-32 { margin-block:var(--sb-space-8); }
.sb-scope .sb-u-33 { padding:0;overflow:hidden; }
.sb-scope .sb-u-34 { margin-top:var(--sb-space-8); }
.sb-scope .sb-u-35 { margin:0;color:var(--sb-text-secondary); }
.sb-scope .sb-u-36 { border:0;margin-top:var(--sb-space-5); }
.sb-scope .sb-u-37 { margin:var(--sb-space-4) 0 0; }
.sb-scope .sb-u-38 { justify-content:center; }
.sb-scope .sb-u-39 { flex:none; }
.sb-scope .sb-u-40 { color:var(--sb-text-secondary); }
.sb-scope .sb-u-41 { margin-top:auto; }
.sb-scope .sb-u-42 { margin:var(--sb-space-3) 0 0; }
.sb-scope .sb-u-43 { max-width:50ch; }
.sb-scope .sb-u-44 { margin:0;max-width:46ch; }
.sb-scope .sb-u-45 { margin:0;max-width:46ch;color:var(--sb-text-secondary); }
.sb-scope .sb-u-46 { margin:0;max-width:22ch; }
.sb-scope .sb-u-47 { margin:0;max-width:44ch; }
.sb-scope .sb-u-48 { align-self:flex-start; }
.sb-scope .sb-u-49 { margin:0;max-width:50ch; }
.sb-scope .sb-u-50 { align-items:center; }
.sb-scope .sb-u-51 { font-family:var(--sb-font-title);font-weight:800;color:var(--sb-text-invert); }
.sb-scope .sb-u-52 { margin:0;max-width:34ch; }
.sb-scope .sb-u-53 { border-top:1px solid rgba(250,248,243,.14); }
/* FIN UTILITAIRES */

/* DEBUT PONT DES CLASSES */
/* Genere par gen/pont-classes.py : ne pas editer a la main. */
.sb-scope .elementor-widget.sb-h6 { font-size: var(--sb-text-lg); }
.sb-scope .elementor-widget.sb-body { font-size: var(--sb-text-base); line-height: var(--sb-leading-normal); }
.sb-scope .elementor-widget.sb-body-lg { font-size: var(--sb-text-md); line-height: var(--sb-leading-normal); }
.sb-scope .elementor-widget.sb-prose { line-height: var(--sb-leading-relaxed); }
/* Texte long (pages legales) : taille de lecture et longueur de ligne. Sans ces deux regles, Elementor impose 13 px et toute la largeur. */
.sb-scope .elementor-widget.sb-prose:not([class*="sb-body"]) { font-size: var(--sb-text-base); }
.elementor.elementor .e-con > .elementor-widget.sb-prose:not([class*="sb-body"]) { max-width: var(--sb-measure); }
.sb-scope .elementor-widget.sb-lead { font-size: var(--sb-text-lg); line-height: var(--sb-leading-snug); color: var(--sb-text-secondary); }
.sb-scope .elementor-widget.sb-caption { font-size: var(--sb-text-sm); color: var(--sb-text-secondary); }
.sb-scope .elementor-widget.sb-label { font-size: var(--sb-text-2xs); font-weight: var(--sb-weight-semi); letter-spacing: var(--sb-tracking-label); text-transform: uppercase; color: var(--sb-text-label); line-height: 1.4; }
.sb-scope .elementor-widget.sb-btn { font-family: var(--sb-font-body); font-size: var(--sb-text-md); font-weight: var(--sb-weight-bold); line-height: 1; letter-spacing: -0.01em; text-decoration: none; }
.sb-scope .elementor-widget.sb-btn-secondary { color: var(--sb-text-primary); }
.sb-scope .elementor-widget.sb-btn-sm { font-size: var(--sb-text-sm); }
.sb-scope .elementor-widget.sb-card-title { font-family: var(--sb-font-title); font-size: var(--sb-text-lg); letter-spacing: var(--sb-tracking-title); }
.sb-scope .elementor-widget.sb-badge { font-size: var(--sb-text-2xs); font-weight: var(--sb-weight-bold); letter-spacing: var(--sb-tracking-label); text-transform: uppercase; }
.sb-scope .elementor-widget.sb-badge-success { color: var(--sb-success-ink); }
.sb-scope .elementor-widget.sb-badge-orange { color: var(--sb-orange-ink); }
.sb-scope .elementor-widget.sb-badge-blue { color: var(--sb-blue-ink); }
.sb-scope .elementor-widget.sb-badge-neutral { color: var(--sb-text-primary); }
.sb-scope .elementor-widget.sb-stat-label { font-size: var(--sb-text-2xs); font-weight: var(--sb-weight-semi); letter-spacing: var(--sb-tracking-label); text-transform: uppercase; color: var(--sb-text-label); }
.sb-scope .elementor-widget.sb-stat-value { font-family: var(--sb-font-stat); font-size: var(--sb-text-4xl); font-weight: var(--sb-weight-bold); letter-spacing: var(--sb-tracking-stat); line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--sb-text-primary); }
.sb-scope .elementor-widget.sb-stat-value-sm { font-size: var(--sb-text-2xl); }
.sb-scope .sb-kpi-hero .elementor-widget.sb-stat-label { color: rgba(255, 255, 255, 0.86); }
.sb-scope .sb-kpi-hero .elementor-widget.sb-stat-value { color: #ffffff; font-size: var(--sb-text-6xl); }
.sb-scope .sb-on-ink .elementor-widget.sb-caption, .sb-scope .sb-on-ink .elementor-widget.sb-lead { color: rgba(250, 248, 243, 0.74); }
.sb-scope .sb-on-ink .elementor-widget.sb-label, .sb-scope .sb-on-ink .elementor-widget.sb-stat-label { color: var(--sb-text-invert); }
.sb-scope .sb-p-ink .elementor-widget.sb-label, .sb-scope .sb-p-ink .elementor-widget.sb-stat-label { color: rgba(250,248,243,.74); }
.sb-scope .sb-p-ink .elementor-widget.sb-lead, .sb-scope .sb-p-ink .elementor-widget.sb-caption { color: rgba(250,248,243,.74); }
.sb-scope .sb-p-ink .elementor-widget.sb-stat-value { color: var(--sb-text-invert); }
.sb-scope .elementor-widget.sb-p-tuile-val { font-family: var(--sb-font-stat); font-size: var(--sb-text-3xl); font-weight: 700; letter-spacing: var(--sb-tracking-stat); line-height: 1.05; }
.sb-scope .sb-p-tuile-fort .elementor-widget.sb-p-tuile-val { color: var(--sb-orange-ink); }
.sb-scope .elementor-widget.sb-p-tuile-meta { font-size: var(--sb-text-xs); color: var(--sb-text-secondary); }
.sb-scope .elementor-widget.sb-p-step-n { font-family: var(--sb-font-stat); font-size: var(--sb-text-md); font-weight: 700; color: var(--sb-text-secondary); }
.sb-scope .sb-p-step.is-in .elementor-widget.sb-p-step-n { color: var(--sb-orange-ink); }
.sb-scope .elementor-widget.sb-p-todo-tag { color: var(--sb-orange-ink); font-size: var(--sb-text-2xs); font-weight: 700; letter-spacing: var(--sb-tracking-label); text-transform: uppercase; }
.sb-scope .elementor-widget.sb-u-14 { font-family:var(--sb-font-title); letter-spacing:var(--sb-tracking-title); }
.sb-scope .elementor-widget.sb-u-18 { color:var(--sb-text-secondary); }
.sb-scope .elementor-widget.sb-u-20 { font-family:var(--sb-font-stat); font-size:10px; font-weight:700; }
.sb-scope .elementor-widget.sb-u-22 { color:var(--sb-text-primary); font-weight:600; }
.sb-scope .elementor-widget.sb-u-29 { color:var(--sb-text-secondary); }
.sb-scope .elementor-widget.sb-u-35 { color:var(--sb-text-secondary); }
.sb-scope .elementor-widget.sb-u-40 { color:var(--sb-text-secondary); }
.sb-scope .elementor-widget.sb-u-45 { color:var(--sb-text-secondary); }
.sb-scope .elementor-widget.sb-u-51 { font-family:var(--sb-font-title); font-weight:800; color:var(--sb-text-invert); }
/* FIN PONT DES CLASSES */

/* CALQUES DE LA DEMO DU BANDEAU
   Les deux calques superposes (zone de depot, lecture en cours) sont du
   balisage brut dans un widget Editeur de texte. Elementor pose
   position: relative sur l'enveloppe du widget, qui devient alors le bloc
   conteneur du calque en position absolue : l'enveloppe n'a pas de hauteur
   propre, le calque tombe a zero et les trois etats s'affichent en meme temps.
   On rend l'enveloppe statique pour que .sb-p-demo redevienne le referent.
   Barreaux 1 a 5 essayes : la classe ne peut pas monter sur l'enveloppe sans
   sortir le bloc de son widget, et l'onglet Avance n'expose pas la position
   des enveloppes de widget. */
.sb-scope .sb-p-demo > .elementor-widget-text-editor { position: static; }


/* Zone tactile du bandeau : le pont des widgets repose la taille de base des
   boutons, on remet le minimum du bandeau apres lui. */
.sb-scope .sb-header .elementor-widget-button .elementor-button { min-height: 40px; }

/* Chaque item de liste est devenu un widget, le conteneur porte role=list.
   Les deux regles du systeme qui visaient ul et li les suivent. */
.sb-scope .sb-p-footer .sb-w-list { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; }
.sb-scope .sb-p-proof > .elementor-widget { display: flex; align-items: baseline; gap: 7px;
  font-size: var(--sb-text-sm); color: var(--sb-text-secondary); }

/* MOUVEMENT
   Les Effets de mouvement d'Elementor durent 800 ms au plus court. Le systeme
   plafonne a 400. On ramene l'entree a 320 ms, et sous reduction du mouvement
   le bloc s'affiche tout de suite, sans animation ni voile. */
.sb-scope .e-con.animated { animation-duration: 320ms;
  animation-timing-function: var(--sb-ease-entrance); }
@media (prefers-reduced-motion: reduce) {
  .sb-scope .e-con.elementor-invisible { visibility: visible; animation: none; }
  .sb-scope .e-con.animated { animation: none; }
}

/* FAQ
   Les <details> du prototype sont devenus le widget natif Va-et-vient : chaque
   question est une ligne du repeteur, modifiable au panneau. Le widget reprend
   l'habillage du systeme, y compris le plus qui pivote a l'ouverture. */
.sb-scope .sb-p-faq .elementor-toggle { border-top: 1px solid var(--sb-border-medium); }
.sb-scope .sb-p-faq .elementor-toggle-item { border-bottom: 1px solid var(--sb-border-medium); }
.sb-scope .sb-p-faq .elementor-tab-title { cursor: pointer; margin: 0; padding: var(--sb-space-5) 0;
  font-family: var(--sb-font-body); font-weight: 600; font-size: var(--sb-text-md);
  letter-spacing: 0; line-height: var(--sb-leading-snug); color: var(--sb-text-primary);
  display: flex; justify-content: space-between; gap: var(--sb-space-4); align-items: center;
  min-height: 44px; background: none; border: 0; }
.sb-scope .sb-p-faq .elementor-tab-title .elementor-toggle-icon { display: none; }
.sb-scope .sb-p-faq .elementor-toggle-title { color: inherit; text-decoration: none; }
.sb-scope .sb-p-faq .elementor-tab-title::after { content: ''; width: 14px; height: 14px; flex: none;
  background-color: var(--sb-text-secondary);
  -webkit-mask: var(--sb-p-plus) no-repeat center / contain;
          mask: var(--sb-p-plus) no-repeat center / contain;
  transition: transform var(--sb-duration-base) var(--sb-ease-standard); }
.sb-scope .sb-p-faq .elementor-tab-title.elementor-active::after { transform: rotate(45deg);
  background-color: var(--sb-orange-ink); }
.sb-scope .sb-p-faq .elementor-tab-content { padding: 0 0 var(--sb-space-5); max-width: 62ch;
  color: var(--sb-text-secondary); font-size: var(--sb-text-base);
  line-height: var(--sb-leading-normal); border: 0; }
@media (prefers-reduced-motion: reduce) {
  .sb-scope .sb-p-faq .elementor-tab-title::after { transition: none; }
}

/* TYPOGRAPHIE, DERNIERS REGLAGES
   Les titres sont deja en text-wrap: balance. Le corps de texte, lui, laisse
   passer des lignes veuves d'un mot. text-wrap: pretty les evite sans toucher
   ni a la taille ni a l'interlignage, et il est ignore sans dommage la ou il
   n'est pas su. */
.sb-scope p,
.sb-scope .sb-lead,
.sb-scope .sb-body,
.sb-scope .sb-body-lg,
.sb-scope .sb-caption,
.sb-scope .elementor-widget-text-editor { text-wrap: pretty; }

/* ==========================================================================
   LIENS EN LIGNE DANS LE TEXTE
   Le theme Hello pose a { color: #c36 }. Ce rose donne 3,99:1 sur le fond de
   page, sous le seuil de 4,5 exige pour du corps de texte, et il traverse
   partout ou un lien n'est ni un bouton ni une entree du pied. On rend la
   main au systeme : --sb-orange-ink est le token prevu pour l'orange en
   texte, 5,03:1 sur le fond de page. Le soulignement n'est pas decoratif,
   il evite de porter l'information par la seule couleur.
   ========================================================================== */
.sb-scope .elementor-widget-text-editor a,
.sb-scope .elementor-widget-heading a {
  color: var(--sb-orange-ink); text-decoration: underline;
  text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.sb-scope .elementor-widget-text-editor a:hover,
.sb-scope .elementor-widget-heading a:hover { color: var(--sb-orange-deep); }
.sb-scope .sb-p-ink .elementor-widget-text-editor a,
.sb-scope .sb-p-ink .elementor-widget-heading a { color: var(--sb-text-invert); }
/* Le pied est une navigation, pas de la prose : la couleur suffit a le
   signaler, le soulignement de douze entrees empilees alourdit la colonne. */
.sb-scope .sb-p-footer .elementor-widget-text-editor a { text-decoration: none; }
.sb-scope .sb-p-footer .elementor-widget-text-editor a:hover { text-decoration: underline; }

/* ==================================================================
   MEGA MENU FONCTIONNALITES
   Widget natif Elementor Pro (n-menu). Ce bloc vit dans la feuille du
   design system et non dans le CSS du widget : l'en-tete est global,
   un CSS de widget serait recharge sur chaque page sans raison.
   La grille trois colonnes vient du conteneur Elementor lui-meme,
   pas d'ici : barreau 3 de l'echelle avant le barreau 6.
   ================================================================== */

.sb-scope .sb-p-nav-mega .e-n-menu-title {
  padding: var(--sb-space-2) var(--sb-space-3);
  border-radius: var(--sb-radius-pill);
  min-height: 40px;
  background: transparent;
  border: 0;
  transition: background 160ms ease;
}
.sb-scope .sb-p-nav-mega .e-n-menu-title-text {
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-sm);
  font-weight: var(--sb-weight-medium);
  color: var(--sb-text-secondary);
}
.sb-scope .sb-p-nav-mega .e-n-menu-title:hover,
.sb-scope .sb-p-nav-mega .e-n-menu-title[aria-expanded="true"] {
  background: var(--sb-bg-pill-hover);
}
.sb-scope .sb-p-nav-mega .e-n-menu-title:hover .e-n-menu-title-text,
.sb-scope .sb-p-nav-mega .e-n-menu-title[aria-expanded="true"] .e-n-menu-title-text {
  color: var(--sb-text-primary);
}
.sb-scope .sb-p-nav-mega .e-n-menu-dropdown-icon svg {
  width: 11px; height: 11px; fill: currentColor;
}

/* le widget pose un style en ligne display: var(--display) sur le panneau.
   On ne peut pas le battre avec display, seulement en changeant la variable. */
.sb-scope .e-n-menu-content .sb-p-nav-panneau.e-con { --display: grid; }
.sb-scope .e-n-menu-content .sb-p-nav-col.e-con,
.sb-scope .e-n-menu-content .sb-p-nav-carte.e-con { display: flex; flex-direction: column; }
.sb-scope .e-n-menu-content .sb-p-nav-panneau {
  background: var(--sb-bg-card-elevated);
  border: 1px solid var(--sb-border-subtle);
  border-radius: var(--sb-radius-2xl);
  box-shadow: var(--sb-shadow-lg);
  padding: var(--sb-space-4);
  gap: var(--sb-space-4);
  align-items: stretch;
  /* Elementor pose le decalage gauche du panneau en style en ligne, calcule
     au survol. La largeur est donc le seul levier sans !important : on la
     borne pour que le panneau de la deuxieme entree reste dans la fenetre. */
  --width: min(960px, calc(100vw - 400px));
}
.sb-scope .e-n-menu-content .sb-p-nav-col { gap: 2px; padding: 0; }
.sb-scope .sb-p-nav-lab { padding: var(--sb-space-2) var(--sb-space-3) var(--sb-space-1); }
.sb-scope .sb-p-nav-lab.elementor-widget-heading .elementor-heading-title {
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-2xs);
  font-weight: var(--sb-weight-semi);
  letter-spacing: var(--sb-tracking-label);
  text-transform: uppercase;
  color: var(--sb-text-label);
  line-height: var(--sb-leading-tight);
}

.sb-scope .e-n-menu-content .sb-p-nav-carte {
  gap: 3px;
  padding: var(--sb-space-3);
  border-radius: var(--sb-radius-lg);
  background: transparent;
  transition: background 160ms ease;
}
.sb-scope .e-n-menu-content .sb-p-nav-carte:hover { background: var(--sb-bg-pill-hover); }
.sb-scope .e-n-menu-content .sb-p-nav-carte-forte {
  background: var(--sb-bg-card-flat);
  height: 100%;
  padding: var(--sb-space-5);
}
.sb-scope .e-n-menu-content .sb-p-nav-carte-forte:hover { background: var(--sb-bg-pill-inactive); }
.sb-scope .sb-p-nav-titre.elementor-widget-heading .elementor-heading-title {
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-base);
  font-weight: var(--sb-weight-semi);
  line-height: var(--sb-leading-snug);
  letter-spacing: var(--sb-tracking-normal);
  color: var(--sb-text-primary);
  text-wrap: pretty;
}
.sb-scope .sb-p-nav-carte-forte .sb-p-nav-titre.elementor-widget-heading .elementor-heading-title {
  font-size: var(--sb-text-lg);
}
.sb-scope .sb-p-nav-note,
.sb-scope .sb-p-nav-note p {
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-xs);
  line-height: var(--sb-leading-normal);
  color: var(--sb-text-tertiary);
  margin: auto 0 0;
  padding-top: var(--sb-space-5);
}
.sb-scope .sb-p-nav-desc,
.sb-scope .sb-p-nav-desc p {
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-sm);
  line-height: var(--sb-leading-normal);
  color: var(--sb-text-secondary);
  margin: 0;
}
.sb-scope .e-n-menu-content .sb-p-nav-carte:focus-visible {
  outline: 2px solid var(--sb-border-focus);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  /* Sous 1024 px le widget fabrique son propre bouton et son tiroir. Le
     panneau reprend toute la largeur : la borne min(960px, 100vw - 400px)
     donnerait une largeur negative a 375 px. */
  .sb-scope .e-n-menu-content .sb-p-nav-panneau.e-con { --display: flex; }
  .sb-scope .e-n-menu-content .sb-p-nav-panneau {
    --width: 100%;
    flex-direction: column;
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: var(--sb-space-2) 0;
    gap: var(--sb-space-1);
  }
  .sb-scope .e-n-menu-content .sb-p-nav-carte-forte {
    background: transparent;
    padding: var(--sb-space-3);
    height: auto;
  }
  .sb-scope .sb-p-nav-note { display: none; }
  .sb-scope .sb-p-nav-desc { display: none; }
  /* La barre de navigation reste affichee : elle ne porte plus que le widget,
     qui fabrique lui-meme son bouton et son tiroir. */
  .sb-scope .sb-header { flex-wrap: nowrap; }
  .sb-scope .sb-header > * { flex: 0 0 auto; width: auto; }
  .sb-scope .sb-header .sb-nav { display: flex; margin-left: auto; }
  .sb-scope .sb-header .sb-nav .e-n-menu,
  .sb-scope .sb-header .sb-nav .e-n-menu-wrapper { width: auto; flex: 0 0 auto; }
  /* Le tiroir : une carte posee sous le bandeau, pas cinq pastilles blanches
     pleine largeur. Le fond blanc vient du widget, on le reprend a la carte. */
  /* Le widget pose --stretch-left et --stretch-width en style en ligne, calcules
     au clic depuis la position du bouton. On ne recadre donc pas le tiroir :
     il prend toute la largeur, comme le bandeau au-dessus de lui.
     Le selecteur reprend [data-layout="dropdown"] du widget : sans cet attribut
     sa propre regle, a specificite egale, remet fond, rayon et ombre a plat. */
  .sb-scope .sb-p-nav-mega .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper {
    background: var(--sb-bg-card-elevated);
    border-bottom: 1px solid var(--sb-border-subtle);
    border-radius: 0 0 var(--sb-radius-2xl) var(--sb-radius-2xl);
    box-shadow: var(--sb-shadow-lg);
    padding: var(--sb-space-2) var(--sb-space-4) var(--sb-space-3);
    max-height: calc(100dvh - var(--sb-header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Le widget cale chaque entree sur --stretch-width, soit la largeur pleine
     de l'ecran. Dans un tiroir qui a du padding, la ligne depasse a droite :
     on la ramene sur la largeur utile de la liste. */
  .sb-scope .sb-p-nav-mega .e-n-menu[data-layout="dropdown"] .e-n-menu-item {
    width: 100%;
  }
  .sb-scope .sb-p-nav-mega .e-n-menu[data-layout="dropdown"] .e-n-menu-content {
    max-width: 100%;
  }
  .sb-scope .sb-p-nav-mega .e-n-menu-title {
    background: transparent;
    justify-content: flex-start;
    min-height: 48px;
    border-radius: var(--sb-radius-lg);
  }
  .sb-scope .sb-p-nav-mega .e-n-menu-item + .e-n-menu-item .e-n-menu-title {
    border-top: 1px solid var(--sb-border-subtle);
    border-radius: 0;
  }
  .sb-scope .sb-p-nav-mega .e-n-menu-title-text { font-size: var(--sb-text-md); }
  /* Le bouton du tiroir est la seule cible tactile de l'en-tete : 44 px. */
  .sb-scope .e-n-menu-toggle { min-width: 44px; min-height: 44px; justify-content: flex-end; }
}
@media (max-width: 900px) {
  /* La rangee de droite n'a plus aucun enfant visible : elle poussait le
     bouton du tiroir a 115 px du bord. */
  .sb-scope .sb-header > .sb-row { display: none; }
  .sb-scope .e-n-menu-content .sb-p-nav-vide { display: none; }
  /* Le faux bouton burger de l'en-tete laisse la place a celui du widget. */
  .sb-scope .sb-p-burger { display: none; }
  /* Une seule action principale a l'ecran : le bandeau bas la porte deja. */
  .sb-scope .sb-header .sb-row .elementor-widget-button.sb-w-primary { display: none; }
}


/* ==================================================================
   DEUX WIDGETS QUI N'HERITAIENT PAS DU SYSTEME
   Releve le 1er septembre 2026, en verifiant la page Tarif puis les six
   pages Fonctionnalites deja en ligne. Les deux defauts viennent du meme
   endroit : le balisage rendu par Elementor n'est pas celui que la feuille
   du design system visait.
   ================================================================== */

/* 1. Texte des sections encre.
   Le convertisseur transforme un <p class="sb-body"> en widget Editeur de
   texte dont le contenu est un noeud texte nu. La regle .sb-p-ink p ne
   trouve donc plus de <p> a colorer et le widget retombe sur l'encre
   sombre : 1,02:1 sur fond encre, texte invisible. Les six pages
   fonctionnalites etaient touchees. On vise l'enveloppe du widget. */
.sb-scope .sb-p-ink .elementor-widget.sb-body,
.sb-scope .sb-p-ink .elementor-widget.sb-body-lg,
.sb-scope .sb-p-ink .elementor-widget-text-editor { color: var(--sb-text-invert); }

/* 2. Va-et-vient de la FAQ.
   Le widget natif rend .elementor-toggle-title, pas le <summary> que
   style .sb-p-faq summary. Sans ces regles le titre prend la typo par
   defaut d'Elementor, 32 px en Days One, plus gros que le titre de
   section qui le surplombe. */
.sb-scope .sb-p-faq .elementor-toggle-item { border-bottom: 1px solid var(--sb-border-medium); }
.sb-scope .sb-p-faq .elementor-toggle-item:first-child { border-top: 1px solid var(--sb-border-medium); }
.sb-scope .sb-p-faq .elementor-toggle-title {
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-md);
  font-weight: var(--sb-weight-semi);
  letter-spacing: normal;
  line-height: var(--sb-leading-snug);
  color: var(--sb-text-primary);
  padding-block: var(--sb-space-5);
  min-height: 44px;
}
.sb-scope .sb-p-faq .elementor-tab-content {
  font-size: var(--sb-text-base);
  line-height: var(--sb-leading-normal);
  color: var(--sb-text-secondary);
  padding-top: 0;
  padding-bottom: var(--sb-space-5);
}

/* 3. Lien de saut au contenu.
   Le bloc « liens en ligne » colore tout <a> d'un widget Editeur de texte,
   y compris ceux qui portent .sb-btn : « Aller au contenu » sortait en
   orange fonce sur son fond encre, 3,19:1, alors que c'est la premiere
   cible d'un utilisateur au clavier. On rend la main au bouton. */
.sb-scope .elementor-widget-text-editor a.sb-btn,
.sb-scope .elementor-widget-heading a.sb-btn { text-decoration: none; }
.sb-scope .elementor-widget-text-editor a.sb-btn-ink,
.sb-scope .elementor-widget-text-editor a.sb-btn-ink:hover,
.sb-scope .sb-p-ink .elementor-widget-text-editor a.sb-btn-ink { color: var(--sb-text-invert); }

/* 4. Capture d'application posee dans un pave.
   .sb-p-doc porte le rayon 2xl ; sans decoupe, les coins carres de l'image
   depassent du pave. La regle generalise le overflow:hidden en ligne qui
   trainait sur une section de l'accueil. */
.sb-scope .sb-p-doc { overflow: hidden; }

/* ==================================================================
   CARTE JOUEUR SANS PORTRAIT
   Le visuel d'origine reposait sur la photo d'une personne reelle et
   identifiable, en maillot d'un club existant, avec la marque de
   l'equipementier et deux logos de sponsors, presentee comme un
   « joueur de demonstration ». Retiree le 2 septembre 2026.
   Le numero prend la place du portrait : c'est deja ce que la carte de
   l'application dessine derriere le joueur.
   ================================================================== */
.sb-scope .sb-p-pc-numero {
  display: block;
  font-family: var(--sb-font-title);
  font-weight: 800;
  font-size: clamp(7rem, 62cqw, 15rem);
  line-height: .78;
  text-align: center;
  letter-spacing: -0.05em;
  color: var(--sb-orange-ink);
  padding-block: var(--sb-space-8) var(--sb-space-4);
  -webkit-user-select: none;
  user-select: none;
}
.sb-scope .sb-p-pc-sansphoto .sb-p-pc-id { margin-top: calc(-1 * var(--sb-space-6)); }
.sb-scope .sb-p-pc-wait .sb-p-pc-numero { opacity: 0; }
.sb-scope .sb-p-pc-in .sb-p-pc-numero { animation: sb-pc-rise 420ms cubic-bezier(0.22,1,0.36,1) 140ms both; }
@media (prefers-reduced-motion: reduce){
  .sb-scope .sb-p-pc-in .sb-p-pc-numero { animation: none; }}


/* ============================================================
   CAPTURES DE L'APPLICATION SUR PETIT ECRAN
   Barreau 6 de l'echelle. Essaye avant : la largeur du widget Image
   (Contenu -> Taille, Style -> Largeur), qui ne fait que reduire encore ;
   le conteneur en Grid, qui ne change rien a la taille du fichier. Une
   capture de 1108 px ramenee a 327 px rend son texte a moins de quatre
   pixels : illisible, donc ce n'est plus un exemple. On la laisse a sa
   taille et on fait defiler le cadre, comme les tableaux du site le font
   deja. Le cadre garde son coin arrondi, la barre de defilement est celle
   du systeme.
   ============================================================ */
@media (max-width: 700px) {
  .sb-scope .sb-p-doc.sb-appframe {
    --sb-capture-w: 900px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .sb-scope .sb-p-doc.sb-appframe .elementor-widget-image img {
    /* width: auto ne rend pas la taille du fichier : avec un srcset et un
       sizes a 100vw, le navigateur corrige la densite et retombe sur la
       largeur de l'ecran. On pose donc la largeur de lecture, une seule
       valeur pour toutes les captures, la hauteur suit le rapport. */
    width: var(--sb-capture-w);
    max-width: none;
    height: auto;
  }
}/* End custom CSS */