/* SAEMY — design system complet. Site demo statique (Devim).
   Aucune dependance externe : polices auto-hebergees, illustrations CSS/SVG.
   Direction "Editorial premium clair" : papier chaud, encre, accents sobres en
   aplats solides, regles fines. Pas de glow, pas de gradient neon.

   Les noms de classes de cette feuille correspondent au balisage canonique de
   partials/header.html, partials/footer.html et _template.html, et aux
   composants attendus par js/app.js. Commentaires en phrases plates. */

:root {
  /* Surfaces : papier chaud, du plus clair (cartes) au plus profond (fonds). */
  --bg: #F7F3EA;
  --bg-2: #F0E9DB;
  --surface: #FCFAF4;
  --surface-2: #F3ECDE;
  --surface-3: #EBE2D1;
  --line: #E2D8C6;
  --line-strong: #CBBCA1;

  /* Texte encre. Contraste AA verifie sur #F7F3EA et #FCFAF4. */
  --text: #1C1B18;
  --text-2: #3B3933;
  --text-3: #5C574C;
  /* Assombri de #6E6757 a #655F4F pour passer AA 4,5:1 (1.4.3) meme sur la
     surface la plus dense (--surface-3). Reserve aux meta de-emphasees. */
  --text-faint: #655F4F;

  /* Marque et structure : bleu nuit, CTA primaire. */
  --brand: #21426E;
  --brand-deep: #173052;
  --brand-bright: #2E5994;
  --brand-soft: rgba(33, 66, 110, 0.10);
  --brand-line: rgba(33, 66, 110, 0.30);

  /* Domaine DATA : vert petrole de-neonise. --data-deep sert au texte (AA). */
  --data: #1E7D74;
  --data-deep: #14564F;
  --data-bright: #2C9286;
  --data-soft: rgba(30, 125, 116, 0.10);
  --data-line: rgba(30, 125, 116, 0.34);

  /* Domaine TECH : terracotta chaud. --tech-deep sert au texte (AA). */
  --tech: #BF6536;
  --tech-deep: #9C4A22;
  --tech-bright: #D07B4B;
  --tech-soft: rgba(191, 101, 54, 0.10);
  --tech-line: rgba(191, 101, 54, 0.34);

  /* Notation : or / ochre pour les etoiles pleines. */
  --rating: #B8862B;
  --rating-empty: var(--line-strong);

  /* Semantiques (aplats solides + teintes claires associees). */
  --success: #2E8B57;
  /* --success-text reste sombre pour passer AA en petit texte sur les teintes claires. */
  --success-text: #1F6B41;
  --success-soft: rgba(46, 139, 87, 0.12);
  --warning: #C98A1E;
  --warning-soft: rgba(201, 138, 30, 0.14);
  /* --warning-text reste sombre pour rester lisible sur fond clair. */
  --warning-text: #8A5E11;
  --danger: #B23A2E;
  --danger-soft: rgba(178, 58, 46, 0.12);

  /* Degrades : conserves pour quelques surfaces tres discretes uniquement.
     La marque elle-meme s'exprime desormais en aplat solide (.grad-text). */
  --grad-surface: linear-gradient(168deg, var(--surface), var(--surface-2));
  --grad-mark: linear-gradient(135deg, var(--data) 0%, var(--brand) 55%, var(--tech) 100%);

  /* Typographie (familles auto-hebergees). */
  --font-display: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Echelle typographique fluide (clamp : mobile -> desktop). */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.05rem, 0.99rem + 0.3vw, 1.2rem);
  --fs-lg: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.45rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl: clamp(1.85rem, 1.4rem + 2.2vw, 2.85rem);
  --fs-3xl: clamp(2.3rem, 1.6rem + 3.4vw, 3.85rem);
  --fs-4xl: clamp(2.7rem, 1.7rem + 4.8vw, 4.75rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-base: 1.65;

  /* Espacement (base 4px). */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Rayons : un peu resserres pour un registre plus editorial. */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Ombres chaudes et discretes, sans glow. */
  --shadow-sm: 0 1px 2px rgba(40, 30, 15, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(40, 30, 15, 0.14);
  --shadow-lg: 0 28px 60px -24px rgba(40, 30, 15, 0.18);
  /* Anciennes lueurs neon neutralisees en simple lift, pour la compat des regles
     qui les referencaient encore. */
  --shadow-glow-data: var(--shadow-md);
  --shadow-glow-tech: var(--shadow-md);

  /* Transitions. */
  --t-fast: 130ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Largeurs de conteneur. */
  --container: 76rem;
  --container-wide: 86rem;
  --container-narrow: 52rem;
  --container-pad: clamp(1.15rem, 0.6rem + 2.5vw, 2.5rem);

  /* Z-index. */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav-panel: 200;
  --z-toast: 300;

  /* Hauteur du header (ancres, sticky). */
  --header-h: 4.5rem;
}

/* Reset leger. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* L'attribut hidden doit toujours masquer, meme sur un element en display:flex/grid.
   La regle UA [hidden]{display:none} perd face a une regle auteur, ce qui laissait
   les cartes filtrees visibles. Cette garde retablit le comportement. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  color-scheme: light;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-2);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Texture papier tres legere en fond de page (remplace les lueurs radiales
   neon). Deux washes chauds quasi imperceptibles, sans glow ni couleur saturee. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 42rem at 6% -10%, rgba(33, 66, 110, 0.035), transparent 60%),
    radial-gradient(55rem 40rem at 100% 0%, rgba(191, 101, 54, 0.03), transparent 58%);
  pointer-events: none;
}

img, svg, video { max-width: 100%; }
svg { display: block; }

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--brand-deep); }

ul, ol { list-style: none; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--text);
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); font-weight: 700; }
h4 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }

p { line-height: var(--lh-base); }
strong { color: var(--text); font-weight: 600; }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* Focus visible net partout (bleu nuit, lisible sur papier clair). */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: rgba(33, 66, 110, 0.18); color: var(--text); }

/* Lien d'evitement clavier. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: var(--z-toast);
  background: var(--surface);
  color: var(--text);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
  transition: top var(--t-base);
}
.skip-link:focus { top: 1rem; }

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

/* Primitives de mise en page. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--paper { background: var(--bg-2); border-block: 1px solid var(--line); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid { display: grid; gap: clamp(1rem, 0.6rem + 1.6vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cluster--center { justify-content: center; }

.text-center { text-align: center; }
.muted { color: var(--text-3); }
.lead { font-size: var(--fs-md); color: var(--text-3); }

/* En-tete de section partage. */
.section-head { max-width: 44rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: var(--sp-3); }
.section-head p { color: var(--text-3); font-size: var(--fs-md); margin-top: var(--sp-3); }

/* Sur-titre type etiquette mono, avec un trait court en aplat bleu nuit. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before {
  content: "";
  width: 1.6rem; height: 2px;
  border-radius: 2px;
  background: var(--brand);
}
.eyebrow--data { color: var(--data-deep); }
.eyebrow--data::before { background: var(--data); }
.eyebrow--tech { color: var(--tech-deep); }
.eyebrow--tech::before { background: var(--tech); }

/* Titre accentue : aplat solide (plus de texte en gradient neon).
   Variante par defaut = bleu nuit ; variantes data/tech disponibles. */
.grad-text { color: var(--brand); }
.grad-text--data { color: var(--data-deep); }
.grad-text--tech { color: var(--tech-deep); }

/* Header sticky et navigation principale.
   Balisage : .site-header#site-header > .container.site-header__inner. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(252, 250, 244, 0.82);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
@supports (backdrop-filter: blur(12px)) {
  .site-header { backdrop-filter: blur(12px) saturate(120%); }
}
.site-header.is-scrolled {
  background: rgba(252, 250, 244, 0.96);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  color: var(--text);
  flex-shrink: 0;
}
.brand:hover { color: var(--text); }
.brand__mark { width: 2rem; height: 2rem; flex-shrink: 0; }
.brand__word { line-height: 1; }
.brand__dot { color: var(--tech); }

/* La nav est longue (8 libelles dont SAE-Consulting / SAEMY SAS). On reduit le
   gap et le padding pour la tenir sur une ligne en desktop sans casser. */
.primary-nav { margin-left: auto; min-width: 0; }
.primary-nav__list { display: flex; align-items: center; gap: 0.1rem; }
.primary-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.62rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-3);
  transition: color var(--t-fast), background var(--t-fast);
}
.primary-nav__link:hover { color: var(--text); background: var(--surface-2); }
.primary-nav__link[aria-current="page"] { color: var(--text); font-weight: 600; }
.primary-nav__link[aria-current="page"]::after {
  content: "";
  margin-left: 0.35rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tech);
}

/* Sous 1180px, on resserre encore avant de basculer en burger a 1024px. */
@media (max-width: 1180px) {
  .site-header__inner { gap: var(--sp-3); }
  .primary-nav__link { padding-inline: 0.5rem; font-size: 0.82rem; }
  .header-actions .btn-sm { padding-inline: 0.7rem; }
}

.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* Bouton burger (.nav-toggle) — apparait en mobile. */
.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.nav-toggle:hover { border-color: var(--brand); background: var(--surface-2); }
.nav-toggle__bars { position: relative; display: block; width: 1.1rem; height: 0.7rem; }
.nav-toggle__bars span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-base), opacity var(--t-base);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__bars span:nth-child(3) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* Panneau de navigation mobile (.mobile-nav#mobile-nav). Pilote par js/app.js. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav-panel);
  background: rgba(247, 243, 234, 0.98);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  overflow-y: auto;
}
@supports (backdrop-filter: blur(12px)) {
  .mobile-nav { backdrop-filter: blur(14px); }
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav__body {
  padding: var(--sp-5) var(--container-pad) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__link {
  display: block;
  padding: 0.9rem 0.25rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.mobile-nav__link:hover { color: var(--text); }
.mobile-nav__link[aria-current="page"] { color: var(--brand); }
.mobile-nav__actions { display: grid; gap: var(--sp-3); }

/* Boutons. Variantes nommees btn-* pour coller au balisage existant. */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast), background var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primaire : aplat bleu nuit, texte ivoire (contraste 9,7:1). */
.btn-primary {
  --btn-bg: var(--brand);
  --btn-fg: #FCFAF4;
  --btn-bd: var(--brand);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #FCFAF4; box-shadow: var(--shadow-md); }

.btn-secondary { --btn-bg: var(--surface-2); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand-deep); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-bd: transparent;
  --btn-fg: var(--text-2);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* Aplats data/tech : texte ivoire sur fond solide profond (AA). */
.btn-data { --btn-bg: var(--data-deep); --btn-bd: var(--data-deep); --btn-fg: #FCFAF4; }
.btn-data:hover { --btn-bg: #114843; box-shadow: var(--shadow-md); color: #FCFAF4; }
.btn-tech { --btn-bg: var(--tech-deep); --btn-bd: var(--tech-deep); --btn-fg: #FCFAF4; }
.btn-tech:hover { --btn-bg: #843D1B; box-shadow: var(--shadow-md); color: #FCFAF4; }

.btn-sm { padding: 0.5rem 0.85rem; font-size: var(--fs-xs); }
.btn-lg { padding: 0.95rem 1.6rem; font-size: var(--fs-base); }
.btn-block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Lien fleche discret. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--brand);
}
.link-arrow:hover { color: var(--brand-deep); }
.link-arrow svg { transition: transform var(--t-fast); }
.link-arrow:hover svg { transform: translateX(3px); }

/* Badges et pills. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--text-2);
  background: var(--surface-2);
  white-space: nowrap;
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Pastille "Bientot" pour les boutons data-soon. */
.badge--soon { color: var(--warning-text); background: var(--warning-soft); border-color: rgba(201, 138, 30, 0.4); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--text-2);
  background: var(--surface);
}
.pill--data { color: var(--data-deep); background: var(--data-soft); border-color: var(--data-line); }
.pill--tech { color: var(--tech-deep); background: var(--tech-soft); border-color: var(--tech-line); }
.pill--success { color: var(--success-text); background: var(--success-soft); border-color: rgba(46, 139, 87, 0.4); }
.pill--warning { color: var(--warning-text); background: var(--warning-soft); border-color: rgba(201, 138, 30, 0.4); }

/* Carte de base et variantes. */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.card--hover:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--brand);
  margin-bottom: var(--sp-4);
}
.card__icon--data { color: var(--data-deep); background: var(--data-soft); border-color: var(--data-line); }
.card__icon--tech { color: var(--tech-deep); background: var(--tech-soft); border-color: var(--tech-line); }
.card__title { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.card__text { color: var(--text-3); font-size: var(--fs-sm); }
.card--data { border-top: 2px solid var(--data); }
.card--tech { border-top: 2px solid var(--tech); }

/* Les 3 grandes tuiles de l'accueil et leurs sous-menus Data/Tech.
   Variantes historiques --entreprise/--sasu/--solutions conservees (utilisees
   par le balisage des pages) ; les axes correspondent desormais a
   SAE-Consulting / SAEMY / SAEMY SAS. */
.tiles { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, 1fr); }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
/* Filet d'accent en tete de tuile, en aplat plein (pas de glow). */
.tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tile-accent, var(--brand));
}
.tile:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.tile--entreprise { --tile-accent: var(--data); }
.tile--sasu { --tile-accent: var(--tech); }
.tile--solutions { --tile-accent: var(--brand); }

.tile__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.1em;
}
.tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin: var(--sp-3) 0 var(--sp-4);
  color: var(--brand);
}
.tile--entreprise .tile__icon { color: var(--data-deep); background: var(--data-soft); border-color: var(--data-line); }
.tile--sasu .tile__icon { color: var(--tech-deep); background: var(--tech-soft); border-color: var(--tech-line); }
.tile__title { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.tile__text { color: var(--text-3); font-size: var(--fs-sm); flex-grow: 1; }
.tile__foot { margin-top: var(--sp-5); }

/* Bouton de depli du sous-menu d'une tuile (clic / clavier, aria-expanded). */
.tile__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-4);
  padding: 0.55rem 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.tile__toggle:hover { border-color: var(--brand); }
.tile__toggle-chevron { transition: transform var(--t-base); }
.tile__toggle[aria-expanded="true"] .tile__toggle-chevron { transform: rotate(180deg); }

.tile__submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base);
}
.tile__submenu.is-open { grid-template-rows: 1fr; }
.tile__submenu-inner { overflow: hidden; }
.tile__submenu-grid { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); }

.subtile {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.subtile:hover { transform: translateX(3px); }
.subtile--data:hover { border-color: var(--data-line); }
.subtile--tech:hover { border-color: var(--tech-line); }
.subtile__body { flex-grow: 1; }
.subtile__label { font-weight: 700; color: var(--text); font-family: var(--font-display); }
.subtile__desc { font-size: var(--fs-xs); color: var(--text-3); }
.subtile__tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  align-self: center;
}
.subtile--data .subtile__tag { color: var(--data-deep); }
.subtile--tech .subtile__tag { color: var(--tech-deep); }

/* Hero. */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 8vw, 8rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  grid-template-columns: 1.05fr 0.95fr;
}
.hero__eyebrow { margin-bottom: var(--sp-4); }
.hero h1 { font-size: var(--fs-4xl); margin-bottom: var(--sp-5); }
.hero__lead { font-size: var(--fs-md); color: var(--text-3); max-width: 34rem; }
.hero__actions { margin-top: var(--sp-6); }
.hero__visual { position: relative; }

/* Carte vitrine editoriale (habille un hero ou une section). Anciennement
   "glassy/neon", desormais carte papier propre avec une barre titre sobre. */
.glass-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.glass-card__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.glass-card__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line-strong); }
.glass-card__dot--data { background: var(--data); }
.glass-card__dot--tech { background: var(--tech); }
.glass-card__dot--brand { background: var(--brand); }
.glass-card__body { padding: 1.25rem; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); line-height: 1.8; }

/* Bandeau de statistiques. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; line-height: 1; color: var(--brand); }
.stat__label { color: var(--text-3); font-size: var(--fs-sm); margin-top: var(--sp-2); }

/* Bande de preuve sociale (logos texte). */
.logos { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); align-items: center; justify-content: center; }
.logos__item { color: var(--text-faint); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.01em; }

/* Carte de process / etape. */
.step { position: relative; }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--brand);
  margin-bottom: var(--sp-3);
}
.step__title { font-size: var(--fs-md); font-weight: 700; font-family: var(--font-display); margin-bottom: var(--sp-2); color: var(--text); }
.step__text { font-size: var(--fs-sm); color: var(--text-3); }

/* Carte formation (catalogue filtrable).
   Chaque carte porte data-track / data-niveau / data-format / data-cat. */
.formation-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.3rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.formation-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.formation-card[data-track="data"]:hover { border-color: var(--data-line); }
.formation-card[data-track="tech"]:hover { border-color: var(--tech-line); }
.formation-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.formation-card__cat { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); letter-spacing: 0.05em; }
.formation-card__title { font-size: var(--fs-md); font-weight: 700; font-family: var(--font-display); color: var(--text); line-height: var(--lh-snug); }
.formation-card__desc { font-size: var(--fs-sm); color: var(--text-3); flex-grow: 1; }
.formation-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--text-3); }
.formation-card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.formation-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.formation-card__price { font-family: var(--font-display); font-weight: 700; color: var(--text); }
.formation-card__teacher { font-size: var(--fs-xs); color: var(--text-faint); }
.formation-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.formation-card__tag { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); padding: 0.15rem 0.45rem; border: 1px solid var(--line); border-radius: var(--r-xs); }

/* Barre de filtres du catalogue. */
.filters {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.filters__row { display: grid; gap: var(--sp-3); grid-template-columns: 1.6fr repeat(3, 1fr); }
.filters__search { position: relative; }
.filters__search svg { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.filters__search .input { padding-left: 2.5rem; }
.filters__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.filters__count { font-size: var(--fs-sm); color: var(--text-3); }
.filters__count strong { color: var(--brand); }

.track-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.track-chip {
  padding: 0.45rem 0.95rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.track-chip:hover { color: var(--text); border-color: var(--brand); }
.track-chip[aria-pressed="true"] { color: var(--brand-deep); border-color: var(--brand); background: var(--brand-soft); }
.track-chip[data-track="data"][aria-pressed="true"] { color: var(--data-deep); border-color: var(--data-line); background: var(--data-soft); }
.track-chip[data-track="tech"][aria-pressed="true"] { color: var(--tech-deep); border-color: var(--tech-line); background: var(--tech-soft); }

/* Formulaires. */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.field__label .req { color: var(--danger); }
.field__hint { font-size: var(--fs-xs); color: var(--text-faint); }
.field__error { font-size: var(--fs-xs); color: var(--danger); font-weight: 600; display: none; }
.field.has-error .field__error { display: block; }

.input, .select, .textarea {
  width: 100%;
  padding: 0.75rem 0.95rem;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--brand); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(33, 66, 110, 0.16);
  background: var(--surface);
}
.textarea { min-height: 8rem; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C574C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--danger); }

.checkbox-field { display: flex; align-items: flex-start; gap: 0.65rem; }
.checkbox-field input { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--brand); flex-shrink: 0; }
.checkbox-field label { font-size: var(--fs-sm); color: var(--text-3); }

.form-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.form-grid .field--full { grid-column: 1 / -1; }

/* Grille deux colonnes (texte + carte), partagee par plusieurs pages.
   Ratio asymetrique sur grand ecran, repli en une colonne sous 860px. */
.split-2 {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  grid-template-columns: 0.95fr 1.05fr;
}
@media (max-width: 860px) {
  .split-2 { grid-template-columns: 1fr; }
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}

/* Section et cartes de pricing (toggle mensuel/annuel). */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.pricing-toggle__btn {
  padding: 0.45rem 1.05rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.pricing-toggle__btn[aria-pressed="true"] { color: #FCFAF4; background: var(--brand); }
.pricing-toggle__save { font-size: var(--fs-xs); color: var(--success-text); font-weight: 700; }

.plans { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, 1fr); align-items: start; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.plan--featured { border-color: var(--brand); box-shadow: var(--shadow-md); }
.plan--featured::before {
  content: "Le plus choisi";
  position: absolute;
  top: -0.75rem; left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #FCFAF4;
  white-space: nowrap;
}
.plan__name { font-size: var(--fs-lg); font-family: var(--font-display); font-weight: 700; color: var(--text); }
.plan__desc { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-2); min-height: 2.8rem; }
.plan__price { display: flex; align-items: baseline; gap: 0.3rem; margin: var(--sp-4) 0; }
.plan__price-num { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; color: var(--text); }
.plan__price-suffix { font-size: var(--fs-sm); color: var(--text-3); }
.plan__features { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0; flex-grow: 1; }
.plan__feature { display: flex; align-items: flex-start; gap: 0.55rem; font-size: var(--fs-sm); color: var(--text-2); }
.plan__feature svg { color: var(--success); flex-shrink: 0; margin-top: 0.15rem; }

/* Accordeon FAQ. */
.faq { display: grid; gap: var(--sp-3); }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.faq-item.is-open { border-color: var(--line-strong); }
.faq-item__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: 1.1rem 1.3rem;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
}
.faq-item__icon { flex-shrink: 0; color: var(--text-3); transition: transform var(--t-base); }
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); color: var(--brand); }
.faq-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base); }
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel-inner { overflow: hidden; }
.faq-item__panel p { padding: 0 1.3rem 1.2rem; color: var(--text-3); font-size: var(--fs-sm); }

/* Temoignage. */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.quote__text { font-size: var(--fs-md); color: var(--text-2); flex-grow: 1; }
.quote__author { display: flex; align-items: center; gap: 0.85rem; }
.avatar {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: #FCFAF4;
  background: var(--brand);
  flex-shrink: 0;
}
.avatar--data { background: var(--data-deep); }
.avatar--tech { background: var(--tech-deep); }
.quote__name { font-weight: 700; color: var(--text); font-size: var(--fs-sm); }
.quote__role { font-size: var(--fs-xs); color: var(--text-faint); }

/* Carte membre / formateur (centree, sobre). */
.member { text-align: center; }
.member .avatar { width: 4rem; height: 4rem; font-size: var(--fs-md); margin: 0 auto var(--sp-3); }
.member__name { font-family: var(--font-display); font-weight: 700; color: var(--text); }
.member__role { font-size: var(--fs-sm); color: var(--text-3); }

/* Affichage de note STATIQUE (sans JS).
   Deux couches d'etoiles SVG empilees : couche vide en --rating-empty,
   couche pleine en --rating clippee a (--rating / 5) * 100%. Robuste, sans image.
   --rating est attendu en ligne sur .rating__stars (ex. style="--rating:4.8"). */
.rating { display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.rating__stars {
  --star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.2l-4.94 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  width: 6.2em;
  height: 1.15em;
  vertical-align: -0.18em;
  background: var(--rating-empty);
  -webkit-mask: var(--star-svg) repeat-x left center / 1.24em 1.15em;
  mask: var(--star-svg) repeat-x left center / 1.24em 1.15em;
}
.rating__stars::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--rating, 0) / 5 * 100%);
  background: var(--rating);
  -webkit-mask: var(--star-svg) repeat-x left center / 1.24em 1.15em;
  mask: var(--star-svg) repeat-x left center / 1.24em 1.15em;
}
.rating__value { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: var(--fs-sm); }
.rating__count { font-size: var(--fs-xs); color: var(--text-faint); }
/* Repli si mask CSS indisponible : on garde le libelle accessible (aria-label)
   et on affiche une note textuelle discrete. */
@supports not ((-webkit-mask: url("#")) or (mask: url("#"))) {
  .rating__stars { width: auto; height: auto; background: none; }
  .rating__stars::before { display: none; }
}

/* Widget de NOTATION interactif (demo) — pilote par initRatingInput().
   fieldset.rating-input > button.rating-input__star[data-star]. */
.rating-input { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.rating-input legend { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); padding: 0; }
.rating-input__stars { display: inline-flex; gap: 0.2rem; }
.rating-input__star {
  width: 2.4rem; height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--rating-empty);
  cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.rating-input__star::before {
  content: "";
  width: 1.6rem; height: 1.6rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.2l-4.94 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.2l-4.94 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.rating-input__star:hover { transform: translateY(-1px); }
.rating-input__star.is-on,
.rating-input__star[aria-pressed="true"] { color: var(--rating); }
.rating-input__star.is-preview { color: var(--rating); }
.rating-input__star:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Carte formateur notee. Etend l'esprit de .member avec une note et des meta. */
.trainer-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.trainer-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.trainer-card[data-domain="data"] { border-top: 2px solid var(--data); }
.trainer-card[data-domain="tech"] { border-top: 2px solid var(--tech); }
.trainer-card[data-domain="both"] { border-top: 2px solid var(--brand); }
.trainer-card__head { display: flex; align-items: center; gap: 0.85rem; }
.trainer-card__name { font-family: var(--font-display); font-weight: 700; color: var(--text); line-height: var(--lh-snug); }
.trainer-card__specialty { font-size: var(--fs-sm); color: var(--text-3); }
.trainer-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--text-faint); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.trainer-card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Bloc "formateurs les mieux notes" (leaderboard sobre, lignes numerotees). */
.top-trainers, .leaderboard {
  display: grid;
  gap: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.leaderboard__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.leaderboard__row + .leaderboard__row { border-top: 1px solid var(--line); border-radius: 0; }
.leaderboard__rank {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-faint);
  width: 1.6rem;
  text-align: center;
}
.leaderboard__row:nth-child(1) .leaderboard__rank,
.leaderboard__row--lead .leaderboard__rank { color: var(--rating); font-weight: 700; }
.leaderboard__who { min-width: 0; }
.leaderboard__name { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: var(--fs-sm); }
.leaderboard__specialty { font-size: var(--fs-xs); color: var(--text-faint); }

/* Bandeau CTA : aplat bleu nuit (plus de double halo radial neon). */
.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  background: var(--brand);
  border: 1px solid var(--brand-deep);
  color: #FCFAF4;
  text-align: center;
  overflow: hidden;
}
.cta-band h2 { color: #FCFAF4; margin-bottom: var(--sp-4); }
.cta-band p { color: rgba(252, 250, 244, 0.86); max-width: 38rem; margin: 0 auto var(--sp-6); font-size: var(--fs-md); }
/* Sur fond bleu nuit, le bouton primaire s'inverse en ivoire pour rester visible. */
.cta-band .btn-primary { --btn-bg: #FCFAF4; --btn-bd: #FCFAF4; --btn-fg: var(--brand-deep); }
.cta-band .btn-primary:hover { background: #fff; border-color: #fff; color: var(--brand-deep); }
.cta-band .btn-secondary { --btn-bg: transparent; --btn-bd: rgba(252, 250, 244, 0.55); --btn-fg: #FCFAF4; }
.cta-band .btn-secondary:hover { background: rgba(252, 250, 244, 0.12); color: #FCFAF4; border-color: #FCFAF4; }

/* Grande tuile "Nos solutions" (page SAEMY) — registre premium, 3 boutons.
   Balisage attendu : .solutions-tile > .solutions-grid > a/button.solution-btn. */
.solutions-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.solutions-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--brand);
}
.solutions-tile__head { max-width: 46rem; margin-bottom: var(--sp-6); }
.solutions-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, 1fr); }

.solution-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: left;
  width: 100%;
  padding: clamp(1.2rem, 1rem + 1vw, 1.75rem);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.solution-btn:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow-md); color: var(--text); }
.solution-btn__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text);
}
.solution-btn__desc { font-size: var(--fs-sm); color: var(--text-3); }
.solution-btn__arrow { margin-top: var(--sp-3); font-weight: 600; font-size: var(--fs-sm); color: var(--brand); display: inline-flex; align-items: center; gap: 0.4rem; }
.solution-btn[data-soon] { cursor: pointer; }
.solution-btn[data-soon] .solution-btn__arrow { color: var(--text-faint); }

/* Flow "proposer une mission" (sae-consulting.html et saemy-sas.html).
   Conteneur [data-mission-flow] ; choix [data-domain-choice] ; .domain-pick. */
.mission-flow {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}
.mission-flow__steps { display: grid; gap: var(--sp-5); }
.mission-flow__step-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-3);
}

.domain-choice { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.domain-pick {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 12rem;
  text-align: left;
  padding: 1rem 1.15rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.domain-pick:hover { transform: translateY(-2px); }
.domain-pick__label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); }
.domain-pick__hint { font-size: var(--fs-xs); color: var(--text-3); }
.domain-pick--data:hover { border-color: var(--data-line); }
.domain-pick--tech:hover { border-color: var(--tech-line); }
.domain-pick--data[aria-pressed="true"] {
  border-color: var(--data); background: var(--data-soft);
  box-shadow: inset 0 0 0 1px var(--data);
}
.domain-pick--data[aria-pressed="true"] .domain-pick__label { color: var(--data-deep); }
.domain-pick--tech[aria-pressed="true"] {
  border-color: var(--tech); background: var(--tech-soft);
  box-shadow: inset 0 0 0 1px var(--tech);
}
.domain-pick--tech[aria-pressed="true"] .domain-pick__label { color: var(--tech-deep); }

/* Etiquette du domaine choisi, affichee au-dessus du formulaire mission. */
.domain-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-3);
}
.domain-label:empty { display: none; }

/* Le formulaire mission est revele une fois le domaine choisi, mais reste
   utilisable sans choix (domaine vide tolere) ; .is-chosen ne fait qu'accentuer. */
.mission-flow.is-chosen .mission-flow__form { border-color: var(--brand-line); }
.mission-flow__form { display: grid; gap: var(--sp-4); }

/* Etat vide (catalogue sans resultat). */
.empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--text-3);
}
.empty-state.is-visible { display: flex; }
.empty-state__icon { color: var(--text-faint); }
.empty-state h3 { color: var(--text-2); }

/* Toasts de confirmation. Region : .toast-region#toast-region. */
.toast-region {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: min(24rem, calc(100vw - 2.5rem));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--success);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  transform: translateY(0.5rem);
  opacity: 0;
  pointer-events: auto;
  transition: transform var(--t-base), opacity var(--t-base);
}
.toast.is-visible { transform: translateY(0); opacity: 1; }
.toast--success { border-left-color: var(--success); }
.toast--success .toast__icon { color: var(--success); }
.toast--error { border-left-color: var(--danger); }
.toast--error .toast__icon { color: var(--danger); }
.toast--info { border-left-color: var(--brand); }
.toast--info .toast__icon { color: var(--brand); }
.toast__icon { flex-shrink: 0; margin-top: 0.1rem; }
.toast__title { font-weight: 700; color: var(--text); font-size: var(--fs-sm); }
.toast__msg { font-size: var(--fs-xs); color: var(--text-3); }

/* Fil d'Ariane. */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); color: var(--text-faint); }
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb__sep { color: var(--text-faint); }
.breadcrumb [aria-current="page"] { color: var(--text-2); }

/* En-tete de page interne. */
.page-head { padding-block: clamp(2.5rem, 1.6rem + 4vw, 5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.page-head__title { font-size: var(--fs-3xl); margin: var(--sp-4) 0 var(--sp-3); }
.page-head__lead { font-size: var(--fs-md); color: var(--text-3); max-width: 42rem; }

/* Footer et ruban "demo Devim". Balisage : .site-footer > .container--wide. */
.site-footer {
  margin-top: var(--sp-9);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.devim-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  padding: 0.7rem 1.1rem;
  margin-bottom: var(--sp-8);
  font-size: var(--fs-xs);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-3);
}
.devim-ribbon strong { color: var(--text-2); }
.devim-ribbon a { font-weight: 700; color: var(--brand); }
.devim-ribbon a:hover { color: var(--brand-deep); }

.site-footer__top {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1.6fr repeat(3, 1fr);
  padding-bottom: var(--sp-8);
}
.site-footer__brand .brand { font-size: 1.15rem; }
.site-footer__brand p { margin-top: var(--sp-4); max-width: 24rem; }
.footer-col__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-4); }
.footer-col__list { display: grid; gap: var(--sp-3); }
.footer-col__list a { color: var(--text-3); font-size: var(--fs-sm); }
.footer-col__list a:hover { color: var(--text); }
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.site-footer__legal a { color: var(--text-3); }
.site-footer__legal a:hover { color: var(--text); }

/* Animations reveal au scroll (.reveal -> .is-revealed via IntersectionObserver). */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--t-slow), transform var(--t-slow);
  will-change: opacity, transform;
}
.reveal.is-revealed { opacity: 1; transform: none; }
.reveal[data-reveal-delay="1"] { transition-delay: 80ms; }
.reveal[data-reveal-delay="2"] { transition-delay: 160ms; }
.reveal[data-reveal-delay="3"] { transition-delay: 240ms; }
.reveal[data-reveal-delay="4"] { transition-delay: 320ms; }

/* Verrou de defilement quand le panneau mobile est ouvert. */
body.nav-open { overflow: hidden; }

/* Tablette. */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 30rem; }
  .tiles { grid-template-columns: 1fr; }
  .solutions-grid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
  .plan--featured { order: -1; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .filters__row { grid-template-columns: 1fr 1fr; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}

/* La nav passe en burger des le layout tablette (1024px) : sous ~1024px
   la nav horizontale complete (marque + 8 liens longs + 2 CTA) deborde la
   barre (.site-header__inner est un flex a hauteur fixe sans flex-wrap).
   Le seuil de fermeture dans js/app.js doit suivre (innerWidth > 1024). */
@media (max-width: 1024px) {
  .primary-nav, .header-actions { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Cibles tactiles confort (>=44px) sur pointeur grossier. */
@media (pointer: coarse) {
  .btn-sm { min-height: 44px; }
  .track-chip { min-height: 44px; padding-block: 0.6rem; }
  .domain-pick { min-height: 44px; }
  .rating-input__star { width: 2.75rem; height: 2.75rem; }
}

/* Mobile etroit. */
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .filters__row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
  .toast-region { right: 1rem; left: 1rem; max-width: none; }
}

/* Respect du choix utilisateur : pas d'animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}