/* GAÏA — bundle généré par scripts/build.sh — NE PAS éditer à la main. */

/* ===== tokens/color.css ===== */
/* =============================================================================
   GAÏA · TOKENS COULEUR
   Source de vérité de la palette Sloan (nouvelle marque).
   Convention : on conserve les noms de tokens --sln-* historiques (Ariane) pour
   que le rhabillage d'Ariane soit un simple remplacement de valeurs, et on
   ajoute les couleurs de la nouvelle identité (ink / wasabi / pink / linen).
   ============================================================================= */

:root {
  /* ── Identité de marque (Orphée) ─────────────────────────────────────────── */
  --sln-ink: #121212; /* encre — texte & surfaces sombres, couleur d'interaction */
  --sln-ink-2: #1a1a1a;
  --sln-ink-3: #242424;
  --sln-paper: #ffffff; /* fond principal */
  --sln-linen: #fbfaf6; /* fond crème, sections alternées */
  --sln-linen-2: #f2f0e8;
  --sln-wasabi: #ceff47; /* accent signature — CTA, surbrillance, sélection */
  --sln-wasabi-deep: #b8e83a; /* hover de l'accent */
  --sln-pink: #f74ea8; /* accent secondaire */

  /* ── Couleurs sémantiques d'interaction ──────────────────────────────────── */
  /* Décision branding 2026-06-16 : l'interaction (focus, liens, états actifs,
     remplissages radio/checkbox, icônes) est portée par l'INK, pas un bleu.
     Le wasabi sert d'accent/surbrillance. */
  --sln-primary: var(--sln-ink); /* ex-#0022ff — désormais ink */
  --sln-primary-light: color-mix(in oklab, var(--sln-ink) 14%, transparent); /* halo de focus */
  --sln-accent: var(--sln-wasabi);
  --sln-accent-deep: var(--sln-wasabi-deep);
  --sln-accent-soft: color-mix(in oklab, var(--sln-wasabi) 22%, transparent);
  --sln-secondary: var(--sln-pink);

  /* ── Neutres (échelle conservée d'Ariane — contraste éprouvé) ─────────────── */
  --sln-black: #000;
  --sln-gray-900: #121421;
  --sln-gray-850: #171723;
  --sln-gray-700: #4b5563;
  --sln-gray-600: #637381;
  --sln-gray-500: #6b7280;
  --sln-gray-400: #9ca3af;
  --sln-gray-300-70: #d1d5dbb2;
  --sln-gray-250: #d9deea;
  --sln-gray-200: #dfe4ea;
  --sln-gray-180: #e1e7f2;
  --sln-gray-175: #f1f4ff;
  --sln-gray-150: #e5e7eb;
  --sln-gray-100: #f3f4f6;
  --sln-gray-50: #f5f7fd;
  --sln-gray-25: #f9fafb;

  /* ── Feedback (statuts) ───────────────────────────────────────────────────── */
  --sln-green: #d8f8e0;
  --sln-red: #fff0e9;
  --sln-dark-red: #e35614;
  --sln-invalid: #f23030;
  --sln-invalid-light: #fbc0c0;
  --sln-invalid-lighter: #fef3f3;
  --sln-yellow: #fff200ba;
  --sln-cyan: #01a9db;
  --sln-blue: #0049db; /* conservé pour usages legacy/liens externes éventuels */

  /* ── Sélection texte ──────────────────────────────────────────────────────── */
  --sln-selection-bg: var(--sln-wasabi);
  --sln-selection-fg: var(--sln-ink);
}

::selection {
  background: var(--sln-selection-bg);
  color: var(--sln-selection-fg);
}

/* ===== tokens/typography.css ===== */
/* =============================================================================
   GAÏA · TOKENS TYPOGRAPHIE
   Brockmann (display) + Inter (corps) + JetBrains Mono.
   Les @font-face Brockmann & JetBrains Mono pointent sur /fonts/ (à servir avec
   le bundle) — aucun appel externe vers Google Fonts.
   Inter : à charger via le host (Google Fonts) ou fallback système.
   ============================================================================= */

@font-face {
  font-family: 'Brockmann';
  src: url('/fonts/brockmann-regular-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brockmann';
  src: url('/fonts/brockmann-medium-webfont.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brockmann';
  src: url('/fonts/brockmann-semibold-webfont.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brockmann';
  src: url('/fonts/brockmann-bold-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono — fichier variable (axe poids 400→700), self-hosté.
   Sert les eyebrows et tags ; pas d'appel Google Fonts. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrainsmono-variable-latin-webfont.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Familles ─────────────────────────────────────────────────────────────── */
  --sln-font-sans:
    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --sln-font-display:
    'Brockmann', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --sln-font-mono:
    'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Compat Ariane : les classes .font-* historiques visaient « InterCustom ».
     On redirige InterCustom vers la pile sans actuelle. */
  --sln-font-base: 16px;

  /* ── Échelle de tailles (px, héritée d'Ariane + complétée) ────────────────── */
  --sln-text-xs: 12px;
  --sln-text-sm: 14px;
  --sln-text-base: 16px;
  --sln-text-lg: 18px;
  --sln-text-xl: 20px;
  --sln-text-2xl: 24px;
  --sln-text-3xl: 40px;
  --sln-text-5xl: 70px;

  /* ── Graisses ─────────────────────────────────────────────────────────────── */
  --sln-weight-thin: 100;
  --sln-weight-extralight: 200;
  --sln-weight-light: 300;
  --sln-weight-normal: 400;
  --sln-weight-medium: 500;
  --sln-weight-semibold: 600;
  --sln-weight-bold: 700;
  --sln-weight-extrabold: 800;
  --sln-weight-black: 900;
}

/* Alias de compatibilité : tout code Ariane qui demande « InterCustom » obtient Inter. */
@font-face {
  font-family: 'InterCustom';
  src: local('Inter'), local('Inter-Regular');
  font-weight: 100 900;
  font-display: swap;
}

/* ===== tokens/space.css ===== */
/* =============================================================================
   GAÏA · TOKENS ESPACEMENT
   Échelle 4px consolidée. Ariane utilisait des valeurs arbitraires (gap-[27px]…) ;
   on fournit une échelle propre, et les utilitaires legacy restent dispo pour la
   transition (cf. utilities.css).
   ============================================================================= */

:root {
  --sln-space-0: 0;
  --sln-space-1: 4px;
  --sln-space-2: 8px;
  --sln-space-3: 12px;
  --sln-space-4: 16px;
  --sln-space-5: 20px;
  --sln-space-6: 24px;
  --sln-space-8: 32px;
  --sln-space-10: 40px;
  --sln-space-12: 48px;
  --sln-space-16: 64px;
  --sln-space-20: 80px;
  --sln-space-24: 96px;

  /* Gouttières & rythme de section (Orphée) */
  --sln-gutter: clamp(1rem, 4vw, 3rem);
  --sln-section-py: clamp(5rem, 10vw, 10rem);

  /* Largeur de conteneur de référence */
  --sln-container: 1280px;
}

/* ===== tokens/radius.css ===== */
/* =============================================================================
   GAÏA · TOKENS RAYONS
   Échelle nouvelle marque (Orphée) + correspondances avec l'échelle Ariane.
   ============================================================================= */

:root {
  --sln-radius-xs: 4px;
  --sln-radius-sm: 8px;
  --sln-radius-md: 12px;
  --sln-radius-lg: 16px;
  --sln-radius-xl: 24px;
  --sln-radius-2xl: 32px;
  --sln-radius-pill: 999px;

  /* Compat Ariane : --sln-border était le rayon « par défaut » (6px). On le
     relève légèrement vers le langage Orphée (8px) tout en restant discret. */
  --sln-border: var(--sln-radius-sm);
}

/* ===== tokens/shadow.css ===== */
/* =============================================================================
   GAÏA · TOKENS OMBRES
   Presets hérités d'Ariane (sm/md/lg) + ombre de CTA recolorée sur l'ink.
   ============================================================================= */

:root {
  --sln-shadow-sm: 0px 1px 3px 0px #a6afc366;
  --sln-shadow-md: 0px 1px 4px 0px #0000001f;
  --sln-shadow-lg: 0px 5px 12px 0px #0000001a;

  /* Ombre portée des CTA — alignée sur l'ink (ex : était bleue #0022ff). */
  --sln-shadow-cta: 0 8px 24px -8px color-mix(in oklab, var(--sln-ink) 35%, transparent);
  /* Variante accent pour les CTA wasabi. */
  --sln-shadow-cta-accent: 0 6px 20px -10px color-mix(in oklab, var(--sln-wasabi) 80%, transparent);
}

/* ===== tokens/motion.css ===== */
/* =============================================================================
   GAÏA · TOKENS MOUVEMENT
   Courbe d'animation signature Sloan + durées standard.
   ============================================================================= */

:root {
  --sln-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* courbe signature (Orphée) */
  --sln-ease-back: cubic-bezier(0.34, 1.35, 0.5, 1); /* léger rebond */

  --sln-t-quick: 140ms var(--sln-ease);
  --sln-t-base: 240ms var(--sln-ease);
  --sln-t-slow: 480ms var(--sln-ease);

  /* Compat Ariane : --sln-t était une transition 200ms toute faite. */
  --sln-t: 200ms var(--sln-ease);
}

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

/* ===== tokens/gradient.css ===== */
/* =============================================================================
   GAÏA · TOKENS DÉGRADÉS & VERRE
   Recettes de marque importées d'Orphée (site public) :
   - mesh gradients (spots radiaux multicolores) sur fond clair OU sombre ;
   - surface « liquid glass » (glassmorphism) — fond translucide flouté.
   Le wasabi et le pink restent des ACCENTS : on les dose en halos, jamais en
   aplats. (cf. GUIDELINES.md § Couleurs)
   ============================================================================= */

:root {
  /* ── Mesh gradient clair (fond linen + 4 spots) ───────────────────────────── */
  /* Palette : wasabi (marque) · bleu doux (confiance) · pêche (chaleur) ·
     pink (touche brand discrète, ~25 %). Saturation modérée pour ne pas
     concurrencer un CTA/chip wasabi posé par-dessus. */
  --sln-mesh-light:
    radial-gradient(circle at 16% 20%, color-mix(in oklab, var(--sln-wasabi) 48%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 82% 18%, color-mix(in oklab, oklch(0.86 0.08 235) 55%, transparent) 0%, transparent 52%),
    radial-gradient(circle at 78% 82%, color-mix(in oklab, oklch(0.9 0.08 60) 50%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 22% 88%, color-mix(in oklab, var(--sln-pink) 25%, transparent) 0%, transparent 50%),
    var(--sln-linen-2);

  /* ── Mesh gradient sombre (fond ink + halos wasabi/pink) ──────────────────── */
  /* Pour sections sombres (hero école, pricing). Texte en --sln-paper. */
  --sln-mesh-dark:
    radial-gradient(70% 80% at 88% 30%, color-mix(in oklab, var(--sln-wasabi) 28%, transparent) 0%, transparent 65%),
    radial-gradient(65% 70% at 78% 85%, color-mix(in oklab, var(--sln-pink) 26%, transparent) 0%, transparent 65%),
    radial-gradient(40% 50% at 10% 50%, color-mix(in oklab, var(--sln-wasabi) 7%, transparent) 0%, transparent 60%),
    var(--sln-ink);

  /* ── Surface verre (glassmorphism / liquid glass) ─────────────────────────── */
  /* Reflet en linear-gradient + voile paper translucide. À poser sur un fond
     coloré/mesh/image qui restera visible flouté à travers le verre. */
  --sln-glass-sheen: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.65) 0%,
    rgb(255 255 255 / 0.18) 60%,
    rgb(255 255 255 / 0.45) 100%
  );
  --sln-glass-tint: color-mix(in oklab, var(--sln-paper) 45%, transparent);
  --sln-glass-border: rgb(255 255 255 / 0.55);
  --sln-glass-blur: 18px;
  /* Reliefs internes qui donnent l'épaisseur du verre. */
  --sln-glass-shadow:
    inset 0 1.5px 0.5px rgb(255 255 255 / 0.85),
    inset 0 -1px 0.5px rgb(255 255 255 / 0.35),
    0 1px 2px rgb(0 0 0 / 0.04),
    0 14px 40px -20px rgb(0 0 0 / 0.18);

  /* Variante verre sur fond sombre (voile ink translucide, reflet plus discret). */
  --sln-glass-sheen-dark: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.16) 0%,
    rgb(255 255 255 / 0.03) 60%,
    rgb(255 255 255 / 0.1) 100%
  );
  --sln-glass-tint-dark: color-mix(in oklab, var(--sln-ink) 38%, transparent);
  --sln-glass-border-dark: rgb(255 255 255 / 0.16);

  /* ── Modale glassmorphism (backdrop + panel) ──────────────────────────────── */
  /* Quand une modale verre est ouverte, on floute fortement le fond du site
     derrière un voile ink translucide. Valeurs reprises d'Orphée (EligibilityModal).
       backdrop : blur(32px) saturate(150%) sur voile ink 32 %
       panel    : blur(22px) saturate(160%) (le verre qui porte le contenu)
     Safari/iOS ne floute pas via SVG filter → on garde ce blur simple, suffisant. */
  --sln-modal-backdrop-blur: blur(32px) saturate(150%);
  --sln-modal-backdrop-tint: color-mix(in oklab, var(--sln-ink) 32%, transparent);
  --sln-modal-panel-blur: blur(22px) saturate(160%);
}

/* ===== base/reset.css ===== */
/* =============================================================================
   GAÏA · BASE
   Styles d'éléments (Orphée) + overrides LoanFactory/Bootstrap (Ariane).
   La section LoanFactory n'est utile que dans le contexte TLF ; elle est inerte
   ailleurs (sélecteurs spécifiques .form-control, .lf-*, #dvLoading…).
   ============================================================================= */

/* ── Éléments globaux (langage Orphée) ──────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: light;
}

body {
  background: var(--sln-paper);
  color: var(--sln-ink);
  font-family: var(--sln-font-sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sln-font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sln-ink);
}

/* ── Overrides LoanFactory / Bootstrap (contexte Ariane) ─────────────────────── */
.lf-header-toolbar + div {
  padding-top: 35px !important;
}

.input-group-addon {
  color: var(--sln-gray-50);
}

.form-control {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.form-control:focus {
  border-color: var(--sln-primary) !important;
  -webkit-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, var(--sln-primary) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px !important;
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, var(--sln-primary) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px !important;
}
.form-control[disabled],
fieldset[disabled] .form-control {
  opacity: 0.6;
}

.input-sm,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  font-size: 14px !important;
}

.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  line-height: 1.6875 !important;
  vertical-align: middle !important;
}

.label-info {
  color: #000;
  border-color: #000;
}

.btn-info {
  border-color: #ced4da;
}

#dvLoading span::before {
  content: '\f1ce';
  color: var(--sln-primary);
  text-shadow: none;
  -webkit-text-shadow: none;
}
#dvLoading span:nth-child(2),
#dvLoading span:nth-child(3) {
  display: none;
}
#uiLoading,
#dvLoading {
  opacity: 0;
}

div[data-view='views/transition'],
div[data-view='page/transition'],
div[data-view='page/start-presales'] {
  display: none !important;
}

/* ===== components/typography.css ===== */
/* =============================================================================
   GAÏA · COMPOSANTS TYPOGRAPHIE
   Échelle d'affichage Orphée : titres display + corps + surlignage wasabi.
   ============================================================================= */

.display {
  font-family: var(--sln-font-display);
  font-size: clamp(3.5rem, 8vw, 8rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.h1 {
  font-family: var(--sln-font-display);
  font-size: clamp(2.75rem, 5.4vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 500;
}
.h2 {
  font-family: var(--sln-font-display);
  font-size: clamp(2.125rem, 3.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.h3 {
  font-family: var(--sln-font-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.body-lg {
  font-size: 1.1875rem;
  line-height: 1.5;
}
.body-sm {
  font-size: 0.875rem;
  line-height: 1.55;
}

/* =============================================================================
   SURLIGNAGE — deux façons de mettre un mot en avant (toujours en wasabi) :
     1. .hl-wasabi    surligneur plein (fond wasabi) — pour un mot dans du corps
                      de texte, lisible et franc.
     2. .hl-underline trait « coup de feutre » sous le mot (Orphée) — pour les
                      titres ; plus léger, signature de marque. Souvent combiné
                      à l'italique. S'applique à un <em>/<span> en ligne.
   Choisir l'UN des deux selon le contexte, pas les deux sur le même mot.
   ============================================================================= */

/* 1 · Surligneur plein wasabi (mots-clés dans le corps). */
.hl-wasabi {
  background: var(--sln-wasabi);
  color: var(--sln-ink);
  padding: 0 0.25em;
  border-radius: 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 2 · Coup de feutre wasabi sous le mot (titres). Le trait est une courbe SVG
   en mask, étirée sous le mot — même recette que les titres d'Orphée. */
.hl-underline {
  position: relative;
  display: inline-block;
  font-style: italic;
}
.hl-underline::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.1em;
  height: 0.2em;
  background-color: var(--sln-wasabi);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M4 8 Q 100 3.5 196 6.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M4 8 Q 100 3.5 196 6.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* ===== components/button.css ===== */
/* =============================================================================
   GAÏA · BOUTONS
   Système de boutons Orphée (.btn--*) + bouton secondaire texte d'Ariane.
   Hiérarchie : primaire = wasabi+ink · sombre = ink+paper · ghost = contour.
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--sln-radius-pill);
  padding: 0.875rem 1.5rem;
  font-family: var(--sln-font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 0;
  transition:
    background var(--sln-t-base),
    color var(--sln-t-base),
    transform var(--sln-t-quick),
    box-shadow var(--sln-t-base);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primaire — l'accent signature. */
.btn--primary {
  background: var(--sln-wasabi);
  color: var(--sln-ink);
  box-shadow: var(--sln-shadow-cta-accent);
}
.btn--primary:hover { background: var(--sln-wasabi-deep); }

/* Sombre — action forte sur fond clair. */
.btn--ink {
  background: var(--sln-ink);
  color: var(--sln-paper);
}
.btn--ink:hover { background: var(--sln-ink-2); }

/* Ghost — action discrète, contour. */
.btn--ghost {
  background: transparent;
  color: var(--sln-ink);
  border: 1px solid color-mix(in oklab, var(--sln-ink) 15%, transparent);
}
.btn--ghost:hover { background: color-mix(in oklab, var(--sln-ink) 5%, transparent); }

/* Ghost sur fond sombre. */
.btn--ghost-on-dark {
  background: transparent;
  color: var(--sln-paper);
  border: 1px solid color-mix(in oklab, var(--sln-paper) 25%, transparent);
}
.btn--ghost-on-dark:hover { background: color-mix(in oklab, var(--sln-paper) 8%, transparent); }

/* ── Bouton secondaire texte + icône (hérité Ariane : .sln-sec-btn) ──────────── */
.sln-sec-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-radius: var(--sln-radius-pill);
  font-family: inherit;
  font-size: 12px;
  color: var(--sln-gray-600);
  cursor: pointer;
  transition: background var(--sln-t), color var(--sln-t);
}
.sln-sec-btn:hover {
  background: var(--sln-gray-50);
  color: var(--sln-gray-900);
}
.sln-sec-btn svg { width: 14px; height: 14px; }
.sln-sec-sep {
  align-self: center;
  color: var(--sln-gray-250);
  font-size: 12px;
  user-select: none;
}

/* ===== components/tag.css ===== */
/* =============================================================================
   GAÏA · TAGS & EYEBROWS
   Eyebrow = label en capitales mono au-dessus d'un titre (Orphée).
   Tag = petite étiquette de catégorie.
   ============================================================================= */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sln-font-mono);
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sln-ink);
  border: 1px solid color-mix(in oklab, var(--sln-ink) 12%, transparent);
  border-radius: var(--sln-radius-pill);
  padding: 0.5rem 0.875rem;
  background: color-mix(in oklab, var(--sln-paper) 70%, transparent);
  backdrop-filter: blur(8px);
}
.eyebrow::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--sln-wasabi);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sln-wasabi) 40%, transparent);
}
.eyebrow--on-dark {
  color: var(--sln-paper);
  border-color: color-mix(in oklab, var(--sln-paper) 18%, transparent);
  background: color-mix(in oklab, var(--sln-paper) 6%, transparent);
}
.eyebrow--pink {
  color: var(--sln-pink);
  border-color: color-mix(in oklab, var(--sln-pink) 32%, transparent);
}
.eyebrow--pink::before {
  background: var(--sln-pink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sln-pink) 38%, transparent);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--sln-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--sln-radius-pill);
  background: var(--sln-linen-2);
  color: var(--sln-ink);
}

/* ===== components/card.css ===== */
/* =============================================================================
   GAÏA · CARTES
   Carte de base + titre de section (hérités Ariane, alignés tokens).
   ============================================================================= */

.sln-card {
  background: #fff;
  border: 1px solid var(--sln-gray-200);
  border-radius: var(--sln-radius-lg);
  padding: 18px 20px;
}

.sln-section-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--sln-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

/* ===== components/detail-row.css ===== */
/* =============================================================================
   GAÏA · LIGNES DE DÉTAIL
   Tableau récapitulatif (label + valeur + icône), hérité Ariane.
   L'icône passe en accent ink (ex-accent bleu).
   ============================================================================= */

.sln-det-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 13px;
}
.sln-det-ic {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--sln-accent-soft);
  color: var(--sln-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sln-det-ic svg { width: 13px; height: 13px; }
.sln-det-l {
  color: var(--sln-gray-600);
  flex: 1;
  min-width: 0;
}
.sln-det-v {
  font-weight: 500;
  color: var(--sln-gray-900);
  font-variant-numeric: tabular-nums;
}
.sln-det-sep {
  height: 1px;
  background: var(--sln-gray-200);
  margin: 3px 0;
}

/* ===== components/callout.css ===== */
/* =============================================================================
   GAÏA · BOÎTE DE RÉASSURANCE (callout)
   Encart icône + titre + corps, pour rassurer/informer (hérité Ariane).
   ============================================================================= */

.sln-rea {
  padding: 14px 15px;
  background: #fff;
  border: 1px solid var(--sln-gray-200);
  border-radius: var(--sln-radius-md);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.sln-rea-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--sln-accent-soft);
  color: var(--sln-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sln-rea-icon svg { width: 17px; height: 17px; }
.sln-rea-title {
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--sln-gray-900);
}
.sln-rea-body {
  font-size: 11px;
  color: var(--sln-gray-600);
  margin: 0;
  line-height: 1.4;
}

/* ===== components/tooltip.css ===== */
/* =============================================================================
   GAÏA · TOOLTIPS
   .sln-tip   : pastille « ? » avec bulle au survol (data-tip).
   .sln-info-text : variante bulle positionnée (legacy Ariane).
   ============================================================================= */

.sln-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--sln-gray-250);
  color: var(--sln-gray-400);
  font-size: 8px;
  font-weight: 700;
  cursor: help;
  margin-left: 4px;
  flex-shrink: 0;
  vertical-align: middle;
  text-transform: none;
}
.sln-tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--sln-gray-900);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
  z-index: 101;
}
.sln-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 13px);
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  padding: 8px 10px;
  background: var(--sln-gray-900);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  border-radius: 8px;
  white-space: normal;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
  z-index: 100;
}
.sln-tip:hover::before,
.sln-tip:hover::after { opacity: 1; }

/* ── Variante info-text (legacy) ─────────────────────────────────────────────── */
.sln-info-text {
  display: none;
  width: 326px;
  background-color: white;
  box-shadow: var(--sln-shadow-sm);
  padding: 5px 14px;
  border-radius: 5px;
  position: absolute;
  top: -77px;
  color: var(--sln-gray-900);
  text-align: center;
  line-height: 24px;
  right: -135px;
}
.sln-info-text:after {
  content: ' ';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: white;
  box-shadow: var(--sln-shadow-sm);
}
.sln-info:hover + .sln-info-text { display: flex; }

@media screen and (max-width: 819px) {
  .sln-info-text { right: 0px !important; }
  .sln-info-text:after { left: calc(100% - 28px) !important; }
}

/* ===== components/form.css ===== */
/* =============================================================================
   GAÏA · FORMULAIRES
   Radios/checkboxes custom, slider range, autocomplete (typeahead), highlight.
   États actifs/cochés portés par l'ink (décision branding), point coché wasabi.
   ============================================================================= */

/* ── Checkbox custom (div suivant l'input) ──────────────────────────────────── */
input[type='checkbox']:checked + div {
  background-color: var(--sln-primary);
  border-color: var(--sln-primary);
}
input[type='checkbox']:checked + div:after {
  content: '';
  border-bottom: 1px solid var(--sln-wasabi);
  border-right: 1px solid var(--sln-wasabi);
  width: 6px;
  height: 9px;
  display: block;
  transform: rotate(45deg);
  left: 6px;
  position: relative;
  top: 3px;
}

/* ── Radio custom ───────────────────────────────────────────────────────────── */
input[type='radio']:checked + div {
  border-color: var(--sln-primary);
  background-color: var(--sln-gray-175);
}
input[type='radio']:checked + div:after {
  content: ' ';
  width: 10px;
  height: 10px;
  display: block;
  background: var(--sln-primary);
  left: calc(50% - 5px);
  position: relative;
  top: calc(50% - 5px);
  border-radius: 50%;
}

/* Groupe de radios segmentés (.sln-radio) */
.sln-radio label { border-right-width: 0px; }
.sln-radio label:nth-child(1) {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.sln-radio label:nth-child(5) {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-right-width: 1px;
}

/* ── Slider (range custom) ──────────────────────────────────────────────────── */
.sln-slider-wrap {
  position: relative;
  height: 42px;
  display: flex;
  align-items: center;
}
.sln-track-bg {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--sln-gray-200);
  border-radius: 999px;
  pointer-events: none;
}
.sln-track-fill-el {
  position: absolute;
  left: 0;
  width: var(--sln-fill, 50%);
  height: 6px;
  background: var(--sln-primary);
  border-radius: 999px;
  pointer-events: none;
  transition: width 80ms;
}
.sln-slider-wrap input[type='range'] {
  position: relative;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 42px;
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.sln-slider-wrap input[type='range']:focus { outline: none; }
.sln-slider-wrap input[type='range']:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--sln-accent-soft), 0 0 0 6px var(--sln-primary);
}
.sln-slider-wrap input[type='range']::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}
.sln-slider-wrap input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--sln-primary);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--sln-ink) 25%, transparent);
  margin-top: -8px;
  transition: transform 150ms;
}
.sln-slider-wrap input[type='range']:active::-webkit-slider-thumb { transform: scale(1.12); }
.sln-slider-wrap input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--sln-primary);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--sln-ink) 25%, transparent);
}
.sln-slider-wrap input[type='range']::-moz-range-track { height: 6px; background: transparent; }

/* Variante accent wasabi : remplissage + thumb wasabi (ex : slider de montant
   où l'on veut souligner la valeur choisie). Le reste de l'UI garde l'ink. */
.sln-slider-wrap--wasabi .sln-track-fill-el {
  background: var(--sln-wasabi);
}
.sln-slider-wrap--wasabi input[type='range']::-webkit-slider-thumb {
  border-color: var(--sln-wasabi-deep);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--sln-wasabi) 70%, transparent);
}
.sln-slider-wrap--wasabi input[type='range']::-moz-range-thumb {
  border-color: var(--sln-wasabi-deep);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--sln-wasabi) 70%, transparent);
}
.sln-slider-wrap--wasabi input[type='range']:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--sln-accent-soft), 0 0 0 6px var(--sln-wasabi-deep);
}

/* ── Autocomplete (typeahead.js) ────────────────────────────────────────────── */
.sln-suggest {
  & .tt-dropdown-menu {
    padding: 10px 0 !important;
    box-shadow: var(--sln-shadow-sm) !important;
    -webkit-box-shadow: var(--sln-shadow-sm) !important;
    border-radius: var(--sln-border) !important;
  }
  & .tt-suggestion,
  & .tt-empty-message { padding: 7px 16px !important; }
  & .tt-suggestion-name {
    font-weight: normal !important;
    color: var(--sln-gray-600);
  }
  & .tt-cursor {
    background-color: var(--sln-gray-50) !important;
    color: var(--sln-primary) !important;
  }
}
.tt-suggestion.tt-cursor {
  background: var(--sln-gray-25) !important;
  color: #182230 !important;
}

/* ── Highlight (option sélectionnée/suggestion) ─────────────────────────────── */
.sln-highlighted {
  background-color: var(--sln-gray-50);
  color: var(--sln-primary);
}

/* ── Bordure dégradée d'accent (ex-rose/violet → pink de marque) ─────────────── */
.sln-border-pink {
  border-image-source: linear-gradient(
    104.75deg,
    color-mix(in oklab, var(--sln-pink) 55%, transparent) 10.22%,
    color-mix(in oklab, var(--sln-pink) 30%, transparent) 105.64%
  );
}

/* ===== components/surface.css ===== */
/* =============================================================================
   GAÏA · SURFACES (MESH GRADIENTS & VERRE)
   Fonds de marque + glassmorphism, importés du site Orphée.
     .sln-mesh            fond mesh gradient clair (sur linen)
     .sln-mesh--dark      fond mesh gradient sombre (sur ink, texte paper)
     .sln-glass           surface verre (glassmorphism) à poser sur un fond
     .sln-glass-card      carte prête à l'emploi en verre (mesh + verre + contenu)
     .sln-input--glass    champ de formulaire en verre
   Le verre se pose TOUJOURS sur un fond visible (mesh/image/couleur) : c'est ce
   fond, vu flouté à travers le verre, qui crée l'effet. Sur fond uni clair,
   l'effet est quasi nul — préférer .sln-card classique.
   ============================================================================= */

/* ── Fonds mesh gradient ────────────────────────────────────────────────────── */
.sln-mesh {
  background: var(--sln-mesh-light);
}
.sln-mesh--dark {
  background: var(--sln-mesh-dark);
  color: var(--sln-paper);
}

/* ── Surface verre (glassmorphism) ──────────────────────────────────────────── */
.sln-glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--sln-radius-lg);
  background: var(--sln-glass-sheen), var(--sln-glass-tint);
  border: 1px solid var(--sln-glass-border);
  box-shadow: var(--sln-glass-shadow);
  -webkit-backdrop-filter: blur(var(--sln-glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--sln-glass-blur)) saturate(140%);
  color: var(--sln-ink);
}

/* Verre sur fond sombre : reflet et voile adaptés, texte clair. */
.sln-glass--on-dark {
  background: var(--sln-glass-sheen-dark), var(--sln-glass-tint-dark);
  border-color: var(--sln-glass-border-dark);
  color: var(--sln-paper);
}

/* Variante « liquid glass » : distorsion optique via le filtre SVG
   #sloan-liquid-glass (cf. assets/liquid-glass-filter.svg — à injecter une fois
   dans le document, + servir assets/glass-map.svg sous /glass-map.svg).
   Dégrade proprement : sans le filtre, c'est le blur de .sln-glass qui s'applique.
   iOS/Safari ne supportant pas le SVG filter en backdrop-filter, on neutralise
   via .is-safari (classe à poser sur <html> par sniff UA, comme sur Orphée). */
.sln-glass--liquid::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  -webkit-backdrop-filter: blur(6px) brightness(1.04) saturate(135%);
  backdrop-filter: url('#sloan-liquid-glass') blur(6px) brightness(1.04) saturate(135%);
}
@media (max-width: 899px) {
  .sln-glass--liquid::before {
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
  }
}
html.is-safari .sln-glass--liquid::before {
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

/* ── Carte verre prête à l'emploi ───────────────────────────────────────────── */
/* Structure : .sln-glass-card > .sln-glass-card__bg (le mesh) + .sln-glass-card__glass
   (le verre qui porte le contenu). Le bg reste visible flouté à travers le verre. */
.sln-glass-card {
  position: relative;
  isolation: isolate;
  border-radius: var(--sln-radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 50px -28px color-mix(in oklab, var(--sln-ink) 30%, transparent);
}
.sln-glass-card__bg {
  position: absolute;
  inset: 0;
  background: var(--sln-mesh-light);
  pointer-events: none;
}
.sln-glass-card--dark .sln-glass-card__bg {
  background: var(--sln-mesh-dark);
}
/* Variante image : .sln-glass-card--cover, avec --sln-cover-url.
   ⚠ L'url() dans une custom property est résolue par le navigateur RELATIVEMENT
   à la feuille de style qui l'utilise (ici gaia.css/dist), pas au document.
   → toujours fournir une URL ABSOLUE : --sln-cover-url: url('/images/ecole.jpg'). */
.sln-glass-card--cover .sln-glass-card__bg {
  background: var(--sln-cover-url) center / cover no-repeat;
}
.sln-glass-card__glass {
  position: relative;
  z-index: 1;
  margin: clamp(0.75rem, 1.5vw, 1.25rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: calc(var(--sln-radius-xl) - 0.5rem);
  background: var(--sln-glass-sheen), var(--sln-glass-tint);
  border: 1px solid var(--sln-glass-border);
  box-shadow: var(--sln-glass-shadow);
  -webkit-backdrop-filter: blur(var(--sln-glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--sln-glass-blur)) saturate(140%);
  color: var(--sln-ink);
}
.sln-glass-card--dark .sln-glass-card__glass {
  background: var(--sln-glass-sheen-dark), var(--sln-glass-tint-dark);
  border-color: var(--sln-glass-border-dark);
  color: var(--sln-paper);
}

/* ── Champ avec icône (toujours une icône à gauche) ─────────────────────────── */
/* Structure : .sln-field > .sln-field__icon (SVG Lucide) + input.
   Convention Sloan : tout champ porte une icône à gauche (recherche, e-mail…).
   Icônes : bibliothèque Lucide — https://lucide.dev (SVG inline, stroke 1.75,
   pas de dépendance npm ; copier le SVG voulu dans .sln-field__icon). */
.sln-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.sln-field__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  /* L'input en verre crée un stacking context (backdrop-filter) et, placé après
     l'icône dans le DOM, se peindrait par-dessus elle : on remonte l'icône. */
  z-index: 2;
  width: 20px;
  height: 20px;
  display: inline-flex;
  pointer-events: none;
  color: color-mix(in oklab, currentColor 55%, transparent);
}
.sln-field__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* L'icône réserve sa place à gauche, quel que soit le type d'input. */
.sln-field > input,
.sln-field > .sln-input--glass {
  padding-left: 44px;
}

/* ── Champ de formulaire en verre ───────────────────────────────────────────── */
/* Marche sur fond clair coloré, mesh ou sombre (sur blanc uni, l'effet est nul). */
.sln-input--glass {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--sln-radius-md);
  background: var(--sln-glass-sheen), color-mix(in oklab, var(--sln-paper) 35%, transparent);
  border: 1px solid var(--sln-glass-border);
  box-shadow: var(--sln-glass-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  color: var(--sln-ink);
  font: inherit;
  transition: border-color var(--sln-t-base), box-shadow var(--sln-t-base);
}
.sln-input--glass::placeholder {
  color: color-mix(in oklab, var(--sln-ink) 45%, transparent);
}
.sln-input--glass:focus,
.sln-input--glass:focus-visible {
  outline: none;
  border-color: color-mix(in oklab, var(--sln-ink) 35%, transparent);
  box-shadow: var(--sln-glass-shadow), 0 0 0 4px var(--sln-primary-light);
}
/* Variante sur fond sombre : voile ink, texte clair. */
.sln-input--glass.sln-input--on-dark {
  background: var(--sln-glass-sheen-dark), var(--sln-glass-tint-dark);
  border-color: var(--sln-glass-border-dark);
  color: var(--sln-paper);
}
.sln-input--glass.sln-input--on-dark::placeholder {
  color: color-mix(in oklab, var(--sln-paper) 55%, transparent);
}

/* ===== components/dropdown.css ===== */
/* =============================================================================
   GAÏA · DROPDOWN / LISTBOX (combobox)
   Porté de la recherche d'école d'Orphée (SchoolSearch). Liste de suggestions
   en verre léger sous un champ. Option active surlignée wasabi.
     .sln-dropdown            le conteneur listbox (role="listbox")
     .sln-dropdown__option    une option (role="option") ; [aria-selected] = active
     .sln-dropdown__name      libellé principal
     .sln-dropdown__meta      métadonnée alignée à droite (ville, typologie…)
     .sln-dropdown__option--not-found  item « non listé » (séparé, italique)
     .sln-dropdown__empty     message « aucun résultat »
   ============================================================================= */

.sln-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgb(0 0 0 / 0.06);
  border-radius: var(--sln-radius-lg);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.6) inset,
    0 10px 32px rgb(0 0 0 / 0.14);
  z-index: 20;
  max-height: min(60vh, 24rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sln-dropdown[hidden] {
  display: none;
}

.sln-dropdown__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  border-radius: var(--sln-radius-sm);
  font-family: var(--sln-font-sans);
  font-size: 0.95rem;
  color: var(--sln-ink);
  transition: background 120ms ease;
}
.sln-dropdown__option[aria-selected='true'],
.sln-dropdown__option:hover {
  background: color-mix(in oklab, var(--sln-wasabi) 22%, transparent);
}

.sln-dropdown__name {
  font-weight: 500;
  letter-spacing: -0.005em;
}
.sln-dropdown__meta {
  margin-left: auto;
  padding-left: 1rem;
  font-size: 0.78rem;
  color: rgb(0 0 0 / 0.5);
  letter-spacing: 0.01em;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

.sln-dropdown__option--not-found {
  margin-top: 0.3rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(0 0 0 / 0.08);
  border-radius: 0 0 var(--sln-radius-sm) var(--sln-radius-sm);
  color: rgb(0 0 0 / 0.62);
  font-style: italic;
  font-size: 0.92rem;
}
.sln-dropdown__option--not-found[aria-selected='true'],
.sln-dropdown__option--not-found:hover {
  background: color-mix(in oklab, var(--sln-ink) 5%, transparent);
}
.sln-dropdown__option--not-found::before {
  content: '↗';
  margin-right: 0.5rem;
  font-style: normal;
  color: rgb(0 0 0 / 0.4);
}

.sln-dropdown__empty {
  padding: 0.85rem 0.85rem 0.5rem;
  font-size: 0.9rem;
  color: rgb(0 0 0 / 0.55);
  font-style: italic;
}

/* ===== components/modal.css ===== */
/* =============================================================================
   GAÏA · MODALE GLASSMORPHISM
   Porté d'Orphée (EligibilityModal). Quand la modale est ouverte, le fond du
   site est FORTEMENT flouté derrière un voile ink translucide (le backdrop),
   et le contenu vit dans un panel en verre.
     .sln-modal             racine plein écran, centre le panel ([aria-hidden])
     .sln-modal__backdrop   voile + flou du fond (blur 32px — cf. tokens/gradient)
     .sln-modal__panel      le verre qui porte le contenu (blur 22px)
   Effet de flou du backdrop : var(--sln-modal-backdrop-blur) = blur(32px) saturate(150%).
   ============================================================================= */

.sln-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--sln-gutter);
}
.sln-modal[aria-hidden='true'] {
  display: none;
}

/* Backdrop : voile ink + flou prononcé du fond du site. */
.sln-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--sln-modal-backdrop-tint);
  -webkit-backdrop-filter: var(--sln-modal-backdrop-blur);
  backdrop-filter: var(--sln-modal-backdrop-blur);
}

/* Panel verre : laisse passer le fond flouté, garde la lisibilité du contenu. */
.sln-modal__panel {
  position: relative;
  width: min(660px, 100%);
  margin-top: clamp(2rem, 10vh, 5rem);
  padding: clamp(2.5rem, 4.5vw, 3.5rem) clamp(2rem, 3.5vw, 2.75rem) clamp(2rem, 3.5vw, 2.5rem);
  border-radius: var(--sln-radius-xl);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.72) 0%, rgb(255 255 255 / 0.55) 100%);
  border: 1px solid rgb(255 255 255 / 0.55);
  -webkit-backdrop-filter: var(--sln-modal-panel-blur);
  backdrop-filter: var(--sln-modal-panel-blur);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 1px 2px rgb(0 0 0 / 0.04),
    0 30px 60px -20px rgb(0 0 0 / 0.35);
  color: var(--sln-ink);
  transform: translateY(8px) scale(0.985);
  opacity: 0;
  transition:
    transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 240ms ease;
}
.sln-modal[aria-hidden='false'] .sln-modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sln-modal__panel {
    transition: opacity 200ms ease;
    transform: none;
  }
}

/* ===== utilities/utilities.css ===== */
/* =============================================================================
   GAÏA · UTILITAIRES
   Couche utilitaire façon Tailwind, reprise telle quelle d'Ariane pour garantir
   le rhabillage sans réécrire le HTML des UTF. Les couleurs/rayons passent par
   les tokens --sln-* : changer la marque = changer les tokens, pas ces classes.
   ============================================================================= */

/* ── Display / Flex / Grid ──────────────────────────────────────────────────── */
.flex { display: flex; }
.\!flex { display: flex !important; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.flex-1 { flex: 1; }
.flex-\[1_1_0\] { flex: 1 1 0; }
.flex-\[2_1_0\] { flex: 2 1 0; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-middle { margin: auto 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.grow { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }

/* ── Gap ─────────────────────────────────────────────────────────────────────── */
.gap-\[2\.5px\] { gap: 2.5px; }
.gap-\[4px\] { gap: 4px; }
.gap-\[5px\] { gap: 5px; }
.gap-\[6px\] { gap: 6px; }
.gap-\[8px\] { gap: 8px; }
.gap-\[10px\] { gap: 10px; }
.gap-\[12px\] { gap: 12px; }
.gap-\[14px\] { gap: 14px; }
.gap-\[15px\] { gap: 15px; }
.gap-\[16px\] { gap: 16px; }
.gap-\[18px\] { gap: 18px; }
.gap-\[20px\] { gap: 20px; }
.gap-\[22px\] { gap: 22px; }
.gap-\[24px\] { gap: 24px; }
.gap-\[26px\] { gap: 26px; }
.gap-\[27px\] { gap: 27px; }
.gap-\[30px\] { gap: 30px; }
.gap-\[35px\] { gap: 35px; }
.gap-\[36px\] { gap: 36px; }
.gap-\[40px\] { gap: 40px; }
.gap-\[43px\] { gap: 43px; }
.gap-\[46px\] { gap: 46px; }

/* ── Dimensions ─────────────────────────────────────────────────────────────── */
.h-unset { height: unset; }
.h-\[1px\] { height: 1px; }
.h-\[2px\] { height: 2px; }
.h-\[3px\] { height: 3px; }
.h-\[16px\] { height: 16px; }
.h-\[20px\] { height: 20px; }
.h-\[22px\] { height: 22px; }
.h-\[36px\] { height: 36px; }
.h-\[40px\] { height: 40px; }
.h-\[46px\] { height: 46px; }
.h-\[54px\] { height: 54px; }
.h-\[58px\] { height: 58px; }
.h-\[62px\] { height: 62px; }
.h-\[70px\] { height: 70px; }
.h-\[70vh\] { height: 70vh; }
.h-screen { height: 100vh; }
.max-h-\[200px\] { max-height: 200px; }
.w-1\/2 { width: 50%; }
.w-1\/4 { width: 25%; }
.w-1\/8 { width: 12.5%; }
.w-full { width: 100%; }
.w-fit { width: fit-content; }
.w-\[10px\] { width: 10px; }
.w-\[16px\] { width: 16px; }
.w-\[20px\] { width: 20px; }
.w-\[22px\] { width: 22px; }
.w-\[36px\] { width: 36px; }
.w-\[40px\] { width: 40px; }
.w-\[46px\] { width: 46px; }
.w-\[54px\] { width: 54px; }
.w-\[58px\] { width: 58px; }
.w-\[62px\] { width: 62px; }
.w-\[70px\] { width: 70px; }
.w-\[74px\] { width: 74px; }
.w-\[80px\] { width: 80px; }
.w-\[90px\] { width: 90px; }
.w-\[190px\] { width: 190px; }
.w-\[390px\] { width: 390px; }
.w-\[450px\] { width: 450px; }
.w-\[487px\] { width: 487px; }
.w-\[489px\] { width: 489px; }
.w-\[570px\] { width: 570px; }
.w-\[742px\] { width: 742px; }
.w-\[962px\] { width: 962px; }
.w-\[1042px\] { width: 1042px; }
.w-\[1216px\] { width: 1216px; }
.w-\[1280px\] { width: 1280px; }

/* ── Position ───────────────────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.top-50 { top: 50%; }
.top-\[10px\] { top: 10px; }
.top-\[15px\] { top: 15px; }
.top-\[43px\] { top: 43px; }
.top-\[46px\] { top: 46px; }
.top-\[52px\] { top: 52px; }
.top-\[75px\] { top: 75px; }
.top-\[77px\] { top: 77px; }
.left-0 { left: 0; }
.left-50 { left: 50%; }
.left-\[12px\] { left: 12px; }
.left-\[15px\] { left: 15px; }
.left-\[20px\] { left: 20px; }
.left-\[45px\] { left: 45px; }
.left-\[56px\] { left: 56px; }
.left-\[90px\] { left: 90px; }
.right-0 { right: 0; }
.right-\[15px\] { right: 15px; }
.translate-50 { transform: translate(-50%, -50%); }

/* ── Z-index ────────────────────────────────────────────────────────────────── */
.-z-1 { z-index: -1; }
.z-1 { z-index: 1; }
.z-1000 { z-index: 1000; }
.z-1001 { z-index: 1001; }

/* ── Overflow ───────────────────────────────────────────────────────────────── */
.overflow-y { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }

/* ── Typographie ────────────────────────────────────────────────────────────── */
.font-thin { font-family: var(--sln-font-sans); font-weight: 100; }
.font-extra-light { font-family: var(--sln-font-sans); font-weight: 200; }
.font-light { font-family: var(--sln-font-sans); font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-family: var(--sln-font-sans); font-weight: 500; }
.font-semi-bold { font-family: var(--sln-font-sans); font-weight: 600; }
.font-bold { font-family: var(--sln-font-sans); font-weight: 700; }
.font-extra-bold { font-family: var(--sln-font-sans); font-weight: 800; }
.font-black { font-family: var(--sln-font-sans); font-weight: 900; }

.text-xs { font-size: 12px; line-height: normal; }
.text-sm { font-size: 14px; line-height: normal; }
.text-base { font-size: var(--sln-font-base); line-height: normal; }
.text-lg { font-size: 18px; line-height: 26px; }
.text-xl { font-size: 20px; line-height: normal; }
.text-xxl { font-size: 20px; line-height: 30px; }
.text-2xl { font-size: 24px; line-height: normal; }
.text-3xl { font-size: 40px; line-height: 48px; }
.text-5xl { font-size: 70px; line-height: 40px; }
.leading-\[20px\] { line-height: 20px !important; }
.leading-\[22px\] { line-height: 22px !important; }
.leading-\[24px\] { line-height: 24px !important; }
.text-center { text-align: center; }
.underline { text-decoration: underline; }
.hover\:underline:hover:enabled { text-decoration: underline; }

/* ── Couleur de texte ───────────────────────────────────────────────────────── */
.text-primary { color: var(--sln-primary); }
.hover\:text-primary:hover { color: var(--sln-primary) !important; }
.text-invalid { color: var(--sln-invalid); }
.text-black { color: var(--sln-black); }
.text-white { color: #fff; }
.text-gray-900 { color: var(--sln-gray-900); }
.text-gray-850 { color: var(--sln-gray-850); }
.text-gray-700 { color: var(--sln-gray-700); }
.text-gray-600 { color: var(--sln-gray-600); }
.text-gray-500 { color: var(--sln-gray-500); }
.text-gray-400 { color: var(--sln-gray-400); }
.text-gray-200 { color: var(--sln-gray-200); }
.disabled\:text-gray-400:disabled { color: var(--sln-gray-400) !important; }
.text-cyan { color: var(--sln-cyan); }
.text-red { color: var(--sln-red); }
.text-dark-red { color: var(--sln-dark-red); }
.text-blue { color: var(--sln-blue); }

/* ── Fond ───────────────────────────────────────────────────────────────────── */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: #fff; }
.bg-primary { background-color: var(--sln-primary); }
.bg-accent { background-color: var(--sln-accent); }
.bg-blue { background-color: var(--sln-blue); }
.bg-green { background-color: var(--sln-green); }
.bg-cyan { background-color: var(--sln-cyan); }
.bg-yellow { background-color: var(--sln-yellow); }
.bg-red { background-color: var(--sln-red); }
.bg-invalid { background-color: var(--sln-invalid); }
.bg-invalid-lighter { background-color: var(--sln-invalid-lighter); }
.bg-gray-25 { background-color: var(--sln-gray-25); }
.bg-gray-50 { background-color: var(--sln-gray-50); }
.bg-gray-100 { background-color: var(--sln-gray-100); }
.bg-gray-150 { background-color: var(--sln-gray-150); }
.bg-gray-200 { background-color: var(--sln-gray-200); }
.bg-gray-300-70 { background-color: var(--sln-gray-300-70); }
.hover\:bg-gray-50:hover { background-color: var(--sln-gray-50) !important; }

/* ── Bordures ───────────────────────────────────────────────────────────────── */
.border-0 { border: none; }
.border-1 { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-t-2 { border-top-width: 2px; border-top-style: solid; }
.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.border-primary { border-color: var(--sln-primary); }
.border-gray-100 { border-color: var(--sln-gray-100); }
.border-gray-180 { border-color: var(--sln-gray-180); }
.border-gray-200 { border-color: var(--sln-gray-200); }
.border-gray-250 { border-color: var(--sln-gray-250); }
.border-gray-600 { border-color: var(--sln-gray-600); }
.border-invalid-light { border-color: var(--sln-invalid-light) !important; }
.hover\:border-primary:hover { border-color: var(--sln-primary); }
input.border-invalid-light:focus,
div.border-invalid-light:focus {
  border-color: var(--sln-invalid-light) !important;
  box-shadow: white 0px 0px 0px 0px, var(--sln-invalid-light) 0px 0px 0px 2px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px !important;
}
.focus\:border-primary-light:focus {
  border-color: var(--sln-primary-light) !important;
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, var(--sln-primary-light) 0px 0px 0px 2px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px !important;
}

/* ── Rayons ─────────────────────────────────────────────────────────────────── */
.rounded { border-radius: var(--sln-border); }
.rounded-sm { border-radius: 4px; }
.rounded-smd { border-radius: 5px; }
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 10px; }
.rounded-\[20px\] { border-radius: 20px; }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 24px; }
.rounded-5xl { border-radius: 50px; }
.rounded-full { border-radius: 50%; }
.rounded-r {
  border-start-end-radius: var(--sln-border);
  border-end-end-radius: var(--sln-border);
}

/* ── Ombres ─────────────────────────────────────────────────────────────────── */
.shadow-sm { box-shadow: var(--sln-shadow-sm); }
.shadow-md { box-shadow: var(--sln-shadow-md); }
.shadow-lg { box-shadow: var(--sln-shadow-lg); }

/* ── Padding ────────────────────────────────────────────────────────────────── */
.p-0 { padding: 0; }
.p-\[2px\] { padding: 2px; }
.p-\[5px\] { padding: 5px; }
.p-\[11px\] { padding: 11px; }
.p-\[30px\] { padding: 30px; }
.p-\[50px\] { padding: 50px; }
.px-\[5px\] { padding-left: 5px; padding-right: 5px; }
.px-\[10px\] { padding-left: 10px; padding-right: 10px; }
.px-\[15px\] { padding-left: 15px; padding-right: 15px; }
.px-\[16px\] { padding-left: 16px; padding-right: 16px; }
.px-\[17px\] { padding-left: 17px; padding-right: 17px; }
.px-\[18px\] { padding-left: 18px; padding-right: 18px; }
.px-\[20px\] { padding-left: 20px; padding-right: 20px; }
.px-\[21px\] { padding-left: 21px; padding-right: 21px; }
.px-\[22px\] { padding-left: 22px; padding-right: 22px; }
.px-\[24px\] { padding-left: 24px; padding-right: 24px; }
.px-\[28px\] { padding-left: 28px; padding-right: 28px; }
.px-\[30px\] { padding-left: 30px; padding-right: 30px; }
.px-\[32px\] { padding-left: 32px; padding-right: 32px; }
.px-\[36px\] { padding-left: 36px; padding-right: 36px; }
.px-\[40px\] { padding-left: 40px; padding-right: 40px; }
.px-\[46px\] { padding-left: 46px; padding-right: 46px; }
.px-\[68px\] { padding-left: 68px; padding-right: 68px; }
.px-\[101\.5px\] { padding-left: 101.5px; padding-right: 101.5px; }
.py-\[6px\] { padding-top: 6px; padding-bottom: 6px; }
.py-\[7px\] { padding-top: 7px; padding-bottom: 7px; }
.py-\[8px\] { padding-top: 8px; padding-bottom: 8px; }
.py-\[10px\] { padding-top: 10px; padding-bottom: 10px; }
.py-\[11px\] { padding-top: 11px; padding-bottom: 11px; }
.py-\[12px\] { padding-top: 12px; padding-bottom: 12px; }
.py-\[13px\] { padding-top: 13px; padding-bottom: 13px; }
.py-\[15px\] { padding-top: 15px; padding-bottom: 15px; }
.py-\[16px\] { padding-top: 16px; padding-bottom: 16px; }
.py-\[17px\] { padding-top: 17px; padding-bottom: 17px; }
.py-\[21\.5px\] { padding-top: 21.5px; padding-bottom: 21.5px; }
.py-\[31px\] { padding-top: 31px; padding-bottom: 31px; }
.py-\[32px\] { padding-top: 32px; padding-bottom: 32px; }
.pt-\[10px\] { padding-top: 10px; }
.pt-\[15px\] { padding-top: 15px; }
.pt-\[20px\] { padding-top: 20px; }
.pt-\[24px\] { padding-top: 24px; }
.pt-\[55px\] { padding-top: 55px; }
.pb-\[15px\] { padding-bottom: 15px; }
.pb-\[20px\] { padding-bottom: 20px; }
.pb-\[27px\] { padding-bottom: 27px; }
.pb-\[40px\] { padding-bottom: 40px; }
.pr-0 { padding-right: 0; }
.pr-\[16px\] { padding-right: 16px; }
.pr-\[40px\] { padding-right: 40px; }
.pr-\[44px\] { padding-right: 44px; }
.pr-\[92px\] { padding-right: 92px; }
.pl-0 { padding-left: 0; }
.pl-\[20px\] { padding-left: 20px; }
.pl-\[32px\] { padding-left: 32px; }
.pl-\[40px\] { padding-left: 40px; }

/* ── Margin ─────────────────────────────────────────────────────────────────── */
.mb-0 { margin-bottom: 0; }
.mb-\[30px\] { margin-bottom: 30px; }
.mb-\[66px\] { margin-bottom: 66px; }
.mt-\[15px\] { margin-top: 15px; }
.mt-\[10vh\] { margin-top: 10vh; }
.mt-\[20vh\] { margin-top: 20vh; }
.mt-\[31px\] { margin-top: 31px; }
.mt-\[40px\] { margin-top: 40px; }
.mt-\[41px\] { margin-top: 41px; }
.mt-\[64px\] { margin-top: 64px; }
.mt-\[81px\] { margin-top: 81px; }
.mt-\[100px\] { margin-top: 100px; }
.ml-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-\[32px\] { margin-left: 32px; margin-right: 32px; }
.mx-\[35px\] { margin-left: 35px; margin-right: 35px; }
.mx-\[237px\] { margin-left: 237px; margin-right: 237px; }
.my-0 { margin-top: 0; margin-bottom: 0; }

/* ── Divers ─────────────────────────────────────────────────────────────────── */
.outline-none { outline: none; }
.cursor-pointer { cursor: pointer; }
.opacity-0 { opacity: 0%; }
.backdrop-blur-\[14px\] { backdrop-filter: blur(14px); }
.duration-500 { transition-duration: 500ms; }
.-rotate-90 { rotate: -90deg; }
.transform-primary {
  /* Colorisation d'icônes monochromes vers le primaire — legacy, à éviter pour
     du neuf : préférer `color`/`fill: var(--sln-primary)` sur un SVG inline. */
  filter: invert(10%) sepia(100%) saturate(5530%) hue-rotate(238deg) brightness(104%) contrast(130%);
}
.placeholder\:text-center::-webkit-input-placeholder { text-align: center; }

/* ── Responsive (breakpoints Ariane : 480px / 819px) ────────────────────────── */
@media screen and (max-width: 480px) {
  .xs\:w-full { width: 100% !important; }
  .xs\:flex-col { flex-direction: column !important; }
  .xs\:hidden { display: none !important; }
  .xs\:flex { display: flex !important; }
  .xs\:px-\[12px\] { padding-left: 12px; padding-right: 12px; }
  .xs\:text-sm { font-size: 14px; }
  .xs\:text-xs { font-size: 12px; }
  .xs\:gap-\[8px\] { gap: 8px !important; }
}

@media screen and (max-width: 819px) {
  .sm\:w-full { width: 100% !important; }
  .sm\:w-\[16px\] { width: 16px !important; }
  .sm\:w-\[30px\] { width: 30px; }
  .sm\:h-\[30px\] { height: 30px; }
  .sm\:px-\[10px\] { padding-left: 10px; padding-right: 10px; }
  .sm\:px-\[16px\] { padding-left: 16px; padding-right: 16px; }
  .sm\:px-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .sm\:flex { display: flex !important; }
  .sm\:flex-col { flex-direction: column !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:relative { position: relative !important; }
  .sm\:text-xxs { font-size: 10px; }
  .sm\:hidden { display: none !important; }
  .sm\:border-0 { border-width: 0 !important; }
}