/* =============================================================================
   ttk-programme.css — page publique /Programme (présentation du programme)
   -----------------------------------------------------------------------------
   Page à style unique (charte graphique) : tout le transverse vient de
   `ttk-foundation.css` (carte, bouton, label, typo, icônes, checklist,
   liste d'arguments, alertes, notation) et tout le rythme marketing
   du `ttk-mkt-*` de fondation, partagé avec `Index`.
   Ce fichier ne porte QUE ce qui est propre à cette page : hero centré à
   statistiques d'accroche, lecteur vidéo, bloc de phase du programme, rangée
   d'atouts, mur de témoignages défilant.
   Préfixe : `ttk-prog-`.
   ============================================================================= */

/* =============================================================================
   1. HERO
   -----------------------------------------------------------------------------
   Bloc centré (là où `Index` a un hero en deux colonnes à mascotte) : il remonte
   SOUS l'en-tête public, qui est `position: fixed` et compensé par
   `main.ttk-site-main` (80px = --ttk-site-header-height, chrome public
   ttk-site.css) — `--ttk-prog-header-offset` en est la valeur miroir.
   ============================================================================= */
.ttk-prog-hero {
    --ttk-prog-header-offset: 80px;
    position: relative;
    margin-top: calc(-1 * var(--ttk-prog-header-offset));
    padding: calc(var(--ttk-prog-header-offset) + var(--ttk-space-8)) 0 var(--ttk-space-10);
    overflow: hidden;
    background: var(--ttk-gradient-hero);
}

/* Halo indigo derrière le texte du hero (décor, non cliquable). */
.ttk-prog-hero-glow {
    position: absolute;
    inset: 0;
    background: var(--ttk-gradient-glow);
    pointer-events: none;
}

.ttk-prog-hero-content {
    position: relative;
    text-align: center;
}

.ttk-prog-hero-title {
    margin: var(--ttk-space-4) 0 0;
}

/* Mesure de lecture de l'accroche (interne au composant, ≠ wrapper de page). */
.ttk-prog-hero-subtitle {
    color: var(--ttk-text-secondary);
    margin: var(--ttk-space-5) auto 0;
    max-width: 72ch;
}

/* Rappel des conditions d'abonnement sous les statistiques. */
.ttk-prog-hero-note {
    margin: var(--ttk-space-6) 0 0;
    font-weight: var(--ttk-weight-semibold);
    color: var(--ttk-warm);
}

/* =============================================================================
   2. STATISTIQUES D'ACCROCHE DU HERO
   -----------------------------------------------------------------------------
   Cartes de chiffres (là où `Index` aligne des chiffres nus `.ttk-home-stat`) —
   à distinguer de `.ttk-stat-card` (fondation), carte de pilotage à pastille
   d'icône. `--accent` met le tarif en avant sans le sortir de la rangée.
   ============================================================================= */
.ttk-prog-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ttk-space-4);
    margin-top: var(--ttk-space-8);
}

.ttk-prog-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ttk-space-1);
    text-align: center;
}

.ttk-prog-stat-value {
    font-family: var(--ttk-font-title);
    font-size: var(--ttk-text-2xl);
    font-weight: var(--ttk-weight-extrabold);
    line-height: var(--ttk-leading-tight);
    color: var(--ttk-text);
}

.ttk-prog-stat-label {
    font-size: var(--ttk-text-sm);
    color: var(--ttk-text-muted);
}

.ttk-prog-stat--accent {
    border-color: color-mix(in srgb, var(--ttk-warm) 40%, transparent);
}

.ttk-prog-stat--accent .ttk-prog-stat-value {
    color: var(--ttk-warm);
}

/* =============================================================================
   3. LECTEUR VIDÉO
   -----------------------------------------------------------------------------
   Coque 16/9 pour l'iframe de présentation (l'iframe n'a pas de ratio propre).
   ============================================================================= */
.ttk-prog-video {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ttk-bg);
    border: 1px solid var(--ttk-border);
    border-radius: var(--ttk-radius-lg);
    box-shadow: var(--ttk-shadow-lg);
}

.ttk-prog-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =============================================================================
   4. COMPARATIF « N'EST PAS » / « C'EST »
   ============================================================================= */
.ttk-prog-compare-head {
    margin-bottom: var(--ttk-space-4);
}

/* =============================================================================
   5. BLOC DE PHASE DU PROGRAMME
   -----------------------------------------------------------------------------
   Une phase de la vie d'un projet : numéro teinté + intitulé, type de questions
   traitées, maille de sujets, exemples concrets. Les 4 phases se distinguent par
   leur teinte, portée par un `--bloc-tint` local que pose le modificateur (même
   motif que `--slot-tint` de `confirm-slot.css`).
   ============================================================================= */
.ttk-prog-blocs {
    display: flex;
    flex-direction: column;
    gap: var(--ttk-space-6);
}

.ttk-prog-bloc-head {
    display: flex;
    align-items: center;
    gap: var(--ttk-space-4);
    margin-bottom: var(--ttk-space-4);
}

.ttk-prog-bloc-num {
    --bloc-tint: var(--ttk-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--bloc-tint) 40%, transparent);
    border-radius: var(--ttk-radius-pill);
    background: color-mix(in srgb, var(--bloc-tint) 16%, transparent);
    color: var(--bloc-tint);
    font-family: var(--ttk-font-title);
    font-size: var(--ttk-text-lg);
    font-weight: var(--ttk-weight-extrabold);
}

.ttk-prog-bloc-num--blue { --bloc-tint: var(--ttk-blue); }
.ttk-prog-bloc-num--green { --bloc-tint: var(--ttk-success); }
.ttk-prog-bloc-num--purple { --bloc-tint: var(--ttk-purple); }

.ttk-prog-bloc-range {
    font-size: var(--ttk-text-sm);
    color: var(--ttk-text-muted);
    margin: var(--ttk-space-1) 0 0;
}

.ttk-prog-bloc-lead {
    color: var(--ttk-text-secondary);
    margin: 0 0 var(--ttk-space-4);
}

.ttk-prog-bloc-examples {
    font-size: var(--ttk-text-sm);
    color: var(--ttk-text-secondary);
    margin: var(--ttk-space-4) 0 0;
}

/* Maille des sujets d'une phase. La tuile est en `--ttk-surface-2` : posée DANS
   la carte de la phase (`--ttk-surface-1`), une `.ttk-card` s'y confondrait. */
.ttk-prog-topics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--ttk-space-3);
}

.ttk-prog-topic {
    padding: var(--ttk-space-3);
    background: var(--ttk-surface-2);
    border: 1px solid var(--ttk-border-subtle);
    border-radius: var(--ttk-radius-sm);
}

.ttk-prog-topic-title {
    font-size: var(--ttk-text-base);
    font-weight: var(--ttk-weight-semibold);
    color: var(--ttk-text);
    margin: 0 0 var(--ttk-space-1);
}

.ttk-prog-topic-text {
    font-size: var(--ttk-text-sm);
    color: var(--ttk-text-muted);
    margin: 0;
}

/* =============================================================================
   6. RANGÉE D'ATOUTS (ce qui se passe entre les sessions)
   ============================================================================= */
.ttk-prog-perks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ttk-space-3);
}

/* =============================================================================
   7. MUR DE TÉMOIGNAGES DÉFILANT
   -----------------------------------------------------------------------------
   Défilement continu d'une piste dupliquée (les avis y sont rendus deux fois :
   la piste boucle à -50%). En pause au survol ; `programme-public.ts` reprend la
   main à la molette / au glissement tactile, puis rend l'animation après 2 s.
   ≠ `.ttk-carousel` (fondation), qui rend des diapositives exclusives.
   ============================================================================= */
.ttk-prog-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: var(--ttk-space-3) 0;
    cursor: grab;
}

.ttk-prog-marquee:active {
    cursor: grabbing;
}

/* Fondus latéraux : les cartes entrent et sortent sans couper net. */
.ttk-prog-marquee::before,
.ttk-prog-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.ttk-prog-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--ttk-bg), transparent);
}

.ttk-prog-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--ttk-bg), transparent);
}

.ttk-prog-marquee-track {
    display: flex;
    gap: var(--ttk-space-5);
    width: max-content;
    animation: ttk-prog-marquee-scroll 40s linear infinite;
}

.ttk-prog-marquee:hover .ttk-prog-marquee-track {
    animation-play-state: paused;
}

@keyframes ttk-prog-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.ttk-prog-review {
    display: flex;
    flex-direction: column;
    gap: var(--ttk-space-2);
    flex-shrink: 0;
    width: 300px;
    min-height: 140px;
}

.ttk-prog-review-text {
    flex: 1;
    font-size: var(--ttk-text-sm);
    font-style: italic;
    line-height: var(--ttk-leading-relaxed);
    color: var(--ttk-text-secondary);
    margin: 0;
}

.ttk-prog-review-author {
    font-size: var(--ttk-text-sm);
    font-weight: var(--ttk-weight-semibold);
    color: var(--ttk-warm);
    margin: 0;
}

/* =============================================================================
   8. RESPONSIVE
   ============================================================================= */
@media (max-width: 767.98px) {
    .ttk-prog-hero {
        padding-bottom: var(--ttk-space-8);
    }

    .ttk-prog-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================================================
   9. MOUVEMENT RÉDUIT
   -----------------------------------------------------------------------------
   Le mur cesse de défiler seul ; il reste parcourable à la molette et au doigt
   (le TS pilote alors `transform`, jamais l'animation).
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .ttk-prog-marquee-track {
        animation: none;
    }
}