/* ───────────────────────────────────────────────────────────────────────
   Sendraise · v2 Service — composants spécifiques au site multipage.
   Construit UNIQUEMENT sur les tokens existants de ../tokens.css.
   (Rappel : --s-7 et --s-9 n'existent pas — ne jamais les utiliser.)
   ─────────────────────────────────────────────────────────────────────── */

/* ── Chips de formats (sous le fan du hero) ─────────────────────────── */
.fmt-chips { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-top: var(--s-6); position: relative; z-index: 3; }
.fmt-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--c-navy);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4); box-shadow: var(--sh-md);
}
.fmt-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-blue); flex-shrink: 0; }
.fmt-chip.alt .dot { background: var(--c-orange); }

/* ── Classes d'actifs traitées (accueil) ────────────────────────────── */
.asset-grid { margin-top: var(--s-12); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.asset-card { background: var(--bg); padding: var(--s-8) var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.asset-card .ac-kicker { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-blue); }
.asset-card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.asset-card p { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.65; }
.asset-card .ac-note { margin-top: auto; padding-top: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-muted); border-top: 1px solid var(--border); }
.asset-card .ac-note b { color: var(--c-orange-ink); font-weight: 500; }

/* ── Alignement du divider des cartes "Ce que nous traitons" ─────────────
   Le trait au-dessus de la note doit tomber au même niveau dans les trois
   cartes, quelle que soit la longueur des textes. Repli : note de 2 lignes
   mini. Idéal : subgrid — la rangée "note" partage sa hauteur entre toutes
   les cartes, donc le divider est toujours au même niveau. */
.asset-card .ac-note { min-height: 60px; }
@supports (grid-template-rows: subgrid) {
  .asset-grid { grid-template-rows: auto auto 1fr auto; row-gap: 0; column-gap: 2px; }
  .asset-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 0; }
  .asset-card .ac-kicker { margin-bottom: var(--s-3); }
  .asset-card h3 { margin-bottom: var(--s-3); }
  .asset-card p { margin-bottom: var(--s-6); }
  .asset-card .ac-note { min-height: 0; margin-top: 0; align-self: stretch; }
}

/* ── Bandeau sur-mesure (sous la grille d'études) ───────────────────── */
.uc-more {
  margin-top: var(--s-6); padding: var(--s-8);
  border: 1px dashed var(--border-strong); border-radius: var(--r-xl);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-8); align-items: center;
}
.uc-more h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); color: var(--fg-strong); margin-bottom: var(--s-2); }
.uc-more p { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.65; max-width: 62ch; }
.uc-more p strong { color: var(--fg-strong); font-weight: 600; }

/* ── Cartes "pourquoi un service" sur fond sombre ───────────────────── */
.sv-why { margin-top: var(--s-12); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); text-align: left; }

/* ── Livrables ──────────────────────────────────────────────────────── */
.deliv-grid { margin-top: var(--s-12); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.deliv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.deliv-card .ext { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); color: var(--c-blue); }
.deliv-card h4 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h4); color: var(--fg-strong); }
.deliv-card p { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.6; }
.deliv-note { margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-muted); }
.deliv-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 0 3px var(--c-success-soft); flex-shrink: 0; }

/* ── Audiences (pour qui) ───────────────────────────────────────────── */
.aud-grid { margin-top: var(--s-12); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.aud-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-8); }
.aud-card .kicker { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--c-blue); display: block; margin-bottom: var(--s-4); }
.aud-card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); color: var(--fg-strong); margin-bottom: var(--s-4); }
.aud-card p { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.65; }
.aud-card ul { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); list-style: none; padding: 0; }
.aud-card li { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.55; padding-left: var(--s-6); position: relative; }
.aud-card li::before { content: "→"; position: absolute; left: 0; color: var(--c-blue); font-family: var(--font-mono); }
.aud-card li strong { color: var(--fg-strong); font-weight: 600; }

/* ── Référence client (Valoria) ─────────────────────────────────────── */
.case-strip { margin-top: var(--s-12); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-8); display: grid; grid-template-columns: auto 1fr; gap: var(--s-8); align-items: center; }
.case-strip .badge { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--c-navy); border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); white-space: nowrap; }
.case-strip p { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.65; }
.case-strip p strong { color: var(--fg-strong); font-weight: 600; }

/* ── Section technologie (layout texte / visuel maîtrisé) ───────────── */
.tech-block { margin-top: var(--s-12); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-14); align-items: start; }
.tech-block .tech-media img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); box-shadow: var(--sh-lg); border: 1px solid var(--border); }
.tech-block .tech-media figcaption { margin-top: var(--s-3); display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-muted); }
.tech-block .tech-media figcaption .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 0 3px var(--c-success-soft); flex-shrink: 0; }

/* ── Teaser d'études (accueil) — lien vers la page études ───────────── */
.uc-foot { margin-top: var(--s-8); display: flex; justify-content: center; }

/* ── CTA final partagé ──────────────────────────────────────────────── */
.final-cta-btn { margin-top: var(--s-8); display: flex; justify-content: center; }

/* ── Nav densifiée (6 liens : + L'Équipe) ───────────────────────────────
   Le label du CTA ne doit jamais se couper ; et la barre passe en menu
   burger un peu plus tôt, là où 6 liens + CTA deviennent serrés. */
.btn-connexion { white-space: nowrap; }
@media (max-width: 1023px) {
  nav .nav-links { display: none; }
  nav .nav-burger { display: flex; }
  .nav-inner > .btn-connexion { display: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sv-why, .deliv-grid { grid-template-columns: repeat(2, 1fr); }
  .asset-grid { grid-template-columns: 1fr; }
  .tech-block { grid-template-columns: 1fr; gap: var(--s-10); }
}
@media (max-width: 768px) {
  .sv-why, .deliv-grid, .aud-grid { grid-template-columns: 1fr; }
  .uc-more, .case-strip { grid-template-columns: 1fr; }
}

/* ── Carrousels du hero (produits ↔ types de commissions) ──────────────
   Deux bandeaux pleine largeur, sens opposés, défilement auto (pause au survol).
   Chips discrets : petites majuscules mono, bord gris, fond transparent,
   point coloré (bleu = produits, orange = types de commissions). */
.hero-marquees { position: relative; z-index: 2; margin-top: var(--s-8); display: flex; flex-direction: column; gap: var(--s-3); }
.hero-mq { overflow: hidden; padding-block: 8px; margin-block: -8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hero-mq-track { display: flex; align-items: center; width: max-content; will-change: transform; animation: hero-mq-scroll 60s linear infinite; }
.hero-mq-track.rev { animation-direction: reverse; }
.hero-mq:hover .hero-mq-track { animation-play-state: paused; }
@keyframes hero-mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-mq-track { animation: none; } }
.hero-chip {
  display: inline-flex; align-items: center; gap: var(--s-2); margin-right: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); white-space: nowrap;
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
}
.hero-chip .d { width: 5px; height: 5px; border-radius: 50%; background: var(--c-blue); flex-shrink: 0; }
.hero-chip .d.alt { background: var(--c-orange); }
@media (max-width: 768px) { .hero-marquees { margin-top: var(--s-6); } }

/* ── Maquette du livrable : les chips de formats (PPTX/XLSX/ACE/PDF) sont
   l'élément le plus bas du hero ; leur ombre 0 4px 24px était rognée net
   par le overflow:hidden du hero. On réserve la place sous le bloc. */
.home-hero .hero-ui-preview { padding-bottom: var(--s-8); }