/* Pages produit : Salons, Analyses, Journal et import, Collecte de données. */

/* Onglets numérotés (Salons) */
.ntabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px }
.ntab {
  display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px 18px; border-radius: 18px; cursor: pointer;
  border: 1px solid rgba(11, 10, 16, .10); background: #FFFFFF; font: inherit; color: var(--ink-2);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.ntab .n { font-family: var(--mono); font-size: 11.5px }
.ntab .q { font-size: 16px; font-weight: 600; color: var(--ink) }
.ntab.on { border-color: var(--accent); background: rgba(124, 58, 237, .07) }
.ntab.on .n { color: var(--accent-ink) }

/* Grille de six fonctions */
/* 360 px mini : trois colonnes au plus dans le conteneur de 1280, donc 3 + 3. */
.six { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px }
.six .lcard .ico, .ctl .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--icon-bg); color: var(--accent); display: grid; place-items: center; margin-bottom: 4px }
.six .t, .ctl .t { font-size: 18px; font-weight: 600; letter-spacing: -.015em }
.six .d, .ctl .d { font-size: 15px; line-height: 1.55; color: var(--ink-2) }

/* Défilé de salons d'exemple */
.gallery { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.gallery-track { display: flex; gap: 14px; width: max-content; will-change: transform }
/* À l'arrêt (mouvement réduit), le défilé s'aligne sur la gouttière. En
   mouvement, pas de marge : elle ferait un saut à chaque tour de boucle. */
@media (prefers-reduced-motion: reduce) { .gallery-track { padding-left: var(--gutter) } }
.room { width: 280px; flex: none; background: #0C0C0E; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .09); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px }
.room .s { font-size: 17px; font-weight: 700 }
.room .m { font-family: var(--mono); font-size: 11px; color: #A3A0AC }
.room .dots { display: flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: 11px; color: #A3A0AC }
.room .dots i { width: 8px; height: 8px; border-radius: 999px; background: #7C3AED }
.room .dots i + i { background: #C4B5FD }

/* Blocs alternés texte / écran (repris des profils) */
.alt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 56px; align-items: center }
.alt.flip .alt-text { order: 2 }
.alt-text { display: flex; flex-direction: column; gap: 14px; max-width: 540px }
.alt-text h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.12; letter-spacing: -.03em }
.alt-text > p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-2) }
.alt-text .ticks li { font-size: 15.5px }
.alt-visual { position: relative; border-radius: 28px; background: var(--tint); padding: clamp(20px, 3vw, 40px); display: flex; justify-content: center; overflow: hidden }
@media (max-width: 899.98px) {
  .alt { grid-template-columns: minmax(0, 1fr) }
  .alt.flip .alt-text { order: 0 }
}

/* « Question choc » (Journal et import) */
.question { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 900px; margin: 0 auto }
.question h2 { margin: 0; font-size: clamp(34px, 4.4vw, 60px); font-weight: 600; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance }
.question .sub { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--accent-ink) }
.question p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 640px }
.question .answer-line { margin-top: 18px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.025em; color: var(--ink) }

/* Face-à-face (Collecte de données vs Test de stratégie) */
.versus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px }
.versus .lcard { gap: 16px; padding: clamp(24px, 3vw, 36px) }
.versus h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em }
.versus dl { margin: 0; display: grid; gap: 14px }
.versus dt { font-family: var(--mono); font-size: 11.5px; color: var(--accent-ink); margin-bottom: 4px }
.versus dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2) }

/* ── Page sombre (Analyses) ──────────────────────────────────────────────── */
.dark-page { background: #000000; color: #FFFFFF }
.dark-page .overline, .dark-page .acc, .dark-page .facts-line b { color: var(--d-accent) }
.dark-page .lede, .dark-page .facts-line { color: var(--d-ink-2) }
.dark-page .badge { background: rgba(124, 58, 237, .16); color: #C4B5FD; border-color: rgba(124, 58, 237, .5) }
.dark-page .btn-secondary { color: #FFFFFF; border-color: rgba(255, 255, 255, .16) }
.dark-page .btn-secondary:hover { color: #FFFFFF; background: rgba(124, 58, 237, .16) }
.dark-page .faq details { border-color: rgba(255, 255, 255, .09) }
.dark-page .faq .answer { color: var(--d-ink-2) }
.dark-page .faq summary::after { color: var(--d-accent) }
.dark-page .dark-panel { background: #0C0C0E; border: 1px solid rgba(255, 255, 255, .09) }
.counter { font-family: var(--mono); font-size: 12px; color: var(--d-accent) }
.counter b { font-weight: 500; color: var(--d-ink-3) }

/* Sélecteur de cartes : une analyse à gauche, son exemple à droite */
.selector { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: stretch }
.selector-list { display: flex; flex-direction: column; gap: 8px }
.pick {
  display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px 18px; border-radius: 16px; cursor: pointer; font: inherit;
  background: #0C0C0E; color: var(--d-ink-2); border: 1px solid rgba(255, 255, 255, .09);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.pick .t { font-size: 16px; font-weight: 600; color: #FFFFFF }
.pick .d { font-size: 13.5px; line-height: 1.45 }
.pick.on { border-color: rgba(124, 58, 237, .7); background: rgba(124, 58, 237, .12) }
.stage { border-radius: 22px; background: #0C0C0E; border: 1px solid rgba(255, 255, 255, .09); padding: clamp(20px, 3vw, 36px); display: flex; align-items: center; justify-content: center; min-height: 340px; position: relative; overflow: hidden }
.stage .viz-card { background: #121016 }
@media (max-width: 899.98px) { .selector { grid-template-columns: minmax(0, 1fr) } }

/* FIG. 1 – 6 */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px }
.fig { background: #0C0C0E; border: 1px solid rgba(255, 255, 255, .09); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px }
.fig .viz { height: 120px; border-radius: 14px; background: #121016; padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 8px; overflow: hidden; font-size: 12px; color: var(--d-ink-2) }
.fig .n { font-family: var(--mono); font-size: 11px; color: var(--d-accent) }
.fig .t { font-size: 18px; font-weight: 600; letter-spacing: -.015em }
.fig .d { font-size: 14.5px; line-height: 1.55; color: var(--d-ink-2) }
.mini-bar { height: 6px; border-radius: 999px; background: #000; overflow: hidden }
.mini-bar > span { display: block; height: 100%; border-radius: 999px; background: #7C3AED }

/* Frise verticale : une session, du début à la fin */
.timeline { display: flex; flex-direction: column; max-width: 860px }
.moment { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 28px; padding-bottom: 36px; position: relative }
.moment::before { content: ''; position: absolute; left: 110px; top: 8px; bottom: 0; width: 1px; background: rgba(255, 255, 255, .16); transform: translateX(13.5px) }
.moment:last-child::before { display: none }
.moment .when { font-family: var(--mono); font-size: 12px; color: var(--d-accent); padding-top: 3px; text-align: right }
.moment .body { position: relative; padding-left: 28px; display: flex; flex-direction: column; gap: 8px }
.moment .body::before { content: ''; position: absolute; left: -5.5px; top: 6px; width: 11px; height: 11px; border-radius: 999px; background: #7C3AED; transform: translateX(-9px) }
.moment h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em }
.moment p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--d-ink-2) }
@media (max-width: 599.98px) {
  .moment { grid-template-columns: minmax(0, 1fr) }
  .moment::before, .moment .body::before { display: none }
  .moment .when { text-align: left }
  .moment .body { padding-left: 0 }
}

/* « Pas un… » */
.nots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px }
.not { border: 1px dashed var(--d-ink-3); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 10px }
.not .k { font-family: var(--mono); font-size: 11.5px; color: var(--d-ink-3) }
.not .t { font-size: 20px; font-weight: 600; letter-spacing: -.02em }
.not .d { font-size: 15px; line-height: 1.55; color: var(--d-ink-2) }