/**
 * Page « Examens blancs » ([tcf_examens_blancs]) — includes/examens-blancs-landing.php
 *
 * Typographie (2026-10-05) : une seule famille, Plus Jakarta Sans (titres 700-800, texte 400-500) ;
 * les mots mis en valeur des titres passent en bleu dans la même police. Instrument Serif italique ne sert
 * plus qu'au mot souligné de jaune du titre de l'en-tête. Petits titres en capitales espacées (.ebl-kicker).
 * Bordures fines sur tout le tour uniquement (jamais de trait latéral), ombres douces.
 * Sections : en-tête bleu (compte à rebours), carte d'atouts qui le chevauche, méthode en 4 étapes,
 * aperçu des résultats, frise des 4 épreuves, bande de chiffres bleue, examens en cartes,
 * mur de témoignages sur fond sombre, FAQ, appel final bleu.
 *
 * Tout est limité à .tcf-ebl ; « div.tcf-ebl ul » bat « .eduvalt-page-content ul » du thème.
 * Versions précédentes : sauvegardes-tcf/2026-10-05-avant-typo-landing/ (Geist), …-avant-landing-pro-v3/ (et antérieures).
 */

/* L'en-tête remplace l'espace haut de la zone de page du thème.
   !important : tcf-global-styles.css impose « padding: 60px 0 !important » à .section-py-120. */
.mci-ebl-page .tg-page-area.section-py-120 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.tcf-ebl {
    --ebl-blue: #1363DF;
    --ebl-blue-600: #0F56C7;
    --ebl-blue-700: #0D47A6;
    --ebl-blue-50: #F0F5FF;
    --ebl-blue-100: #E0EAFE;
    --ebl-blue-200: #C7D8FC;
    --ebl-navy: #082A5E;
    --ebl-night: #06122B;
    --ebl-green: #12BB6A;
    --ebl-green-ink: #047857;
    --ebl-green-soft: #ECFDF5;
    --ebl-orange: #EA580C;
    --ebl-orange-ink: #C2410C;
    --ebl-orange-soft: #FFF7ED;
    --ebl-red-ink: #B91C1C;
    --ebl-red-soft: #FEF2F2;
    --ebl-ink: #0B1220;
    --ebl-heading: #0A1A3A; /* titres : encre tirée vers le bleu nuit de la marque */
    --ebl-text: #475467;
    --ebl-muted: #667085;
    --ebl-faint: #98A2B3;
    --ebl-line: #E8EBF0;
    --ebl-line-strong: #D5DAE1;
    --ebl-soft: #F7F8FA;
    --ebl-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ebl-serif: 'Instrument Serif', 'Times New Roman', serif; /* mot souligné du titre de l'en-tête seulement */
    --ebl-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --ebl-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.04);
    --ebl-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.03), 0 16px 32px -8px rgba(16, 24, 40, 0.1);
    --ebl-shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.03), 0 32px 64px -16px rgba(16, 24, 40, 0.18);
    font-family: var(--ebl-font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ebl-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    interpolate-size: allow-keywords; /* ouverture animée des réponses de la FAQ */
}

.tcf-ebl *,
.tcf-ebl *::before,
.tcf-ebl *::after {
    box-sizing: border-box;
}

.tcf-ebl h1,
.tcf-ebl h2,
.tcf-ebl h3,
.tcf-ebl h4,
.tcf-ebl p,
.tcf-ebl figure {
    margin: 0;
    padding: 0;
    font-family: inherit;
}

/* div.tcf-ebl : bat « .eduvalt-page-content ul (li) » du thème (indentation, 7 px sous chaque puce)
   tout en restant sous les règles des composants (.tcf-ebl .ebl-…), qui fixent leurs propres marges. */
div.tcf-ebl ul,
div.tcf-ebl ol {
    margin: 0;
    padding: 0;
}

div.tcf-ebl ul > li,
div.tcf-ebl ol > li {
    margin: 0;
    list-style: none;
}

.tcf-ebl svg {
    flex-shrink: 0;
}

.tcf-ebl abbr[title] {
    text-decoration: none;
    border: 0;
    cursor: help;
}

.tcf-ebl .ebl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tcf-ebl .ebl-nowrap {
    white-space: nowrap;
}

/* ── Boutons ─────────────────────────────────────────────── */
.tcf-ebl .ebl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--ebl-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tcf-ebl .ebl-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.tcf-ebl .ebl-btn:hover svg:last-child {
    transform: translateX(2px);
}

.tcf-ebl .ebl-btn:focus-visible {
    outline: 2px solid var(--ebl-blue);
    outline-offset: 2px;
}

.tcf-ebl .ebl-btn--lg {
    min-height: 50px;
    padding: 13px 22px;
}

.tcf-ebl .ebl-btn--primary,
.tcf-ebl .ebl-btn--primary:focus {
    background: var(--ebl-blue);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(16, 24, 40, 0.12);
}

.tcf-ebl .ebl-btn--primary:hover {
    background: var(--ebl-blue-600);
    color: #fff;
}

.tcf-ebl .ebl-btn--dark,
.tcf-ebl .ebl-btn--dark:focus {
    background: var(--ebl-ink);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(16, 24, 40, 0.12);
}

.tcf-ebl .ebl-btn--dark:hover {
    background: #1D2939;
    color: #fff;
}

.tcf-ebl .ebl-btn--light,
.tcf-ebl .ebl-btn--light:focus {
    background: #fff;
    color: var(--ebl-blue-700);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

.tcf-ebl .ebl-btn--light:hover {
    background: var(--ebl-blue-50);
    color: var(--ebl-blue-700);
}

.tcf-ebl .ebl-btn--ghost,
.tcf-ebl .ebl-btn--ghost:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.tcf-ebl .ebl-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.tcf-ebl .ebl-btn--outline,
.tcf-ebl .ebl-btn--outline:focus {
    background: #fff;
    border-color: var(--ebl-line-strong);
    color: var(--ebl-ink);
    box-shadow: var(--ebl-shadow-xs);
}

.tcf-ebl .ebl-btn--outline:hover {
    background: var(--ebl-soft);
    color: var(--ebl-ink);
}

.tcf-ebl .ebl-btn--soft,
.tcf-ebl .ebl-btn--soft:focus {
    background: var(--ebl-blue-50);
    color: var(--ebl-blue-700);
}

.tcf-ebl .ebl-btn--soft:hover {
    background: var(--ebl-blue-100);
    color: var(--ebl-blue-700);
}

.tcf-ebl .ebl-hero .ebl-btn:focus-visible,
.tcf-ebl .ebl-band--dark .ebl-btn:focus-visible,
.tcf-ebl .ebl-cta .ebl-btn:focus-visible {
    outline-color: #fff;
}

/* ==========================================================================
   En-tête bleu
   ========================================================================== */
.tcf-ebl .ebl-hero {
    position: relative;
    isolation: isolate;
    color: #fff;
}

.tcf-ebl .ebl-hero::before,
.tcf-ebl .ebl-hero::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    z-index: -1;
    pointer-events: none;
}

.tcf-ebl .ebl-hero::before {
    background: var(--ebl-blue);
}

.tcf-ebl .ebl-hero::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 75%);
    mask-image: linear-gradient(90deg, transparent 15%, #000 75%);
}

.tcf-ebl .ebl-hero-inner {
    display: grid;
    gap: 32px;
    padding: 32px 0 112px;
}

.tcf-ebl .ebl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 4px 12px 4px 4px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
}

.tcf-ebl .ebl-eyebrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-eyebrow-icon svg {
    width: 13px;
    height: 13px;
}

.tcf-ebl .ebl-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.032em;
    color: #fff;
    text-wrap: balance;
}

/* Mot mis en valeur : italique à empattements, souligné jaune (seul usage de l'italique sur la page) */
.tcf-ebl .ebl-title mark {
    padding: 0 4px 0 2px;
    background: linear-gradient(transparent 78%, #FBBF24 78%, #FBBF24 92%, transparent 92%);
    font-family: var(--ebl-serif);
    font-size: 1.12em;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: inherit;
    white-space: nowrap;
}

.tcf-ebl .ebl-lead {
    max-width: 560px;
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}

.tcf-ebl .ebl-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.tcf-ebl .ebl-hero-login {
    margin-top: 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.tcf-ebl .ebl-hero-login a {
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tcf-ebl .ebl-hero-visual {
    position: relative;
}

.tcf-ebl .ebl-deco,
.tcf-ebl .ebl-float {
    display: none;
}

/* Carte « Le rendez-vous du samedi » */
.tcf-ebl .ebl-rdv {
    position: relative;
    z-index: 1;
    padding: 20px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.tcf-ebl .ebl-rdv-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
}

.tcf-ebl .ebl-rdv-label svg {
    width: 16px;
    height: 16px;
    color: #FCD34D;
}

.tcf-ebl .ebl-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-top: 14px;
}

.tcf-ebl .ebl-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.7);
}

.tcf-ebl .ebl-day b {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.tcf-ebl .ebl-day.is-today {
    background: rgba(255, 255, 255, 0.1);
}

.tcf-ebl .ebl-day.is-release {
    background: #fff;
    color: var(--ebl-blue-700);
}

.tcf-ebl .ebl-day.is-release b {
    color: var(--ebl-blue-700);
}

.tcf-ebl .ebl-rdv-next {
    margin-top: 14px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.86);
}

.tcf-ebl .ebl-rdv-next strong {
    font-weight: 600;
    color: #fff;
}

.tcf-ebl .ebl-rdv-hour {
    white-space: nowrap;
}

.tcf-ebl .ebl-countdown {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.tcf-ebl .ebl-countdown span {
    flex: 1;
    padding: 8px 4px;
    background: rgba(8, 42, 94, 0.28);
    border-radius: 10px;
    font-size: 11px;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
}

/* Chiffres à chasse fixe : le compte à rebours ne « saute » pas en défilant */
.tcf-ebl .ebl-countdown b {
    display: block;
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #fff;
}

.tcf-ebl .ebl-countdown.is-released span {
    opacity: 0.45;
}

.tcf-ebl .ebl-rdv-status {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(18, 187, 106, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.tcf-ebl .ebl-rdv-status[hidden] {
    display: none;
}

.tcf-ebl .ebl-rdv-link,
.tcf-ebl .ebl-rdv-link:hover,
.tcf-ebl .ebl-rdv-link:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #fff;
}

.tcf-ebl .ebl-rdv-link svg {
    width: 16px;
    height: 16px;
}

.tcf-ebl .ebl-pill {
    margin-right: 8px;
    padding: 2px 8px;
    background: var(--ebl-green);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ==========================================================================
   Bandes pleine largeur, en-têtes de section
   ========================================================================== */
/* flow-root : la marge négative de la carte de tête ne doit pas « tirer » la bande vers le haut */
.tcf-ebl .ebl-band {
    display: flow-root;
    position: relative;
    isolation: isolate;
    padding: 56px 0;
    scroll-margin-top: 100px;
}

.tcf-ebl .ebl-band::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    z-index: -1;
    background: var(--ebl-band-bg, #fff);
    pointer-events: none;
}

.tcf-ebl .ebl-band--white {
    --ebl-band-bg: #fff;
}

.tcf-ebl .ebl-band--soft {
    --ebl-band-bg: var(--ebl-soft);
    --ebl-notch: var(--ebl-soft);
}

.tcf-ebl .ebl-band--blue {
    --ebl-band-bg:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 44px 44px,
        var(--ebl-blue);
    color: #fff;
}

/* Bande sombre (témoignages) : bleu nuit profond, halo bleu derrière le mur de captures,
   trame fine qui s'estompe autour du texte (dessinée par ::after, au-dessus du fond) */
.tcf-ebl .ebl-band--dark {
    --ebl-band-bg:
        radial-gradient(620px 520px at 76% 50%, rgba(19, 99, 223, 0.45), transparent 70%),
        radial-gradient(480px 340px at 0% 100%, rgba(19, 99, 223, 0.16), transparent 70%),
        linear-gradient(180deg, #08193D 0%, #050E24 100%);
    color: #fff;
}

.tcf-ebl .ebl-band--dark::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    margin-left: -50vw;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 60% 75% at 28% 50%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 75% at 28% 50%, #000 0%, transparent 75%);
    pointer-events: none;
}

.tcf-ebl .ebl-band.has-lead {
    padding-top: 0;
}

/* La carte des atouts et la bande suivante (même fond) se lisent comme une seule */
.tcf-ebl .ebl-band--flush {
    padding-bottom: 0;
}

/* FAQ et appel final partagent le même fond blanc : pas de double espacement entre les deux */
.tcf-ebl #ebl-faq + #ebl-cta {
    padding-top: 0;
}

.tcf-ebl .is-lead {
    position: relative;
    z-index: 1;
    margin-top: -64px;
}

.tcf-ebl .ebl-panel {
    padding: 20px 16px;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 16px;
    box-shadow: var(--ebl-shadow-lg);
}

/* Petit titre au-dessus des titres : capitales espacées, bleu de la marque */
.tcf-ebl .ebl-kicker {
    display: block;
    margin-bottom: 14px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-band--dark .ebl-kicker {
    color: #8DB5FF;
}

/* Section « progression » : le petit titre est une salutation (« Bonjour Awa »), pas de capitales */
.tcf-ebl .ebl-sec-head .ebl-kicker {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-transform: none;
}

.tcf-ebl .ebl-h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.028em;
    color: var(--ebl-heading);
    text-wrap: balance;
}

/* Mots mis en valeur dans les titres : même police, en bleu */
.tcf-ebl .ebl-h2 em,
.tcf-ebl .ebl-sec-title .ebl-accent,
.tcf-ebl .ebl-cta-title em {
    font-style: normal;
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-band--dark .ebl-h2 {
    color: #fff;
}

.tcf-ebl .ebl-band--dark .ebl-h2 em {
    color: #8DB5FF;
}

.tcf-ebl .ebl-lede {
    max-width: 580px;
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ebl-text);
    text-wrap: pretty;
}

.tcf-ebl .ebl-band--dark .ebl-lede {
    color: rgba(255, 255, 255, 0.7);
}

.tcf-ebl .ebl-center-head {
    max-width: 720px;
    margin: 0 auto 36px;
    text-align: center;
}

.tcf-ebl .ebl-center-head .ebl-lede {
    margin-right: auto;
    margin-left: auto;
}

/* En-tête des sections « élève » (progression) */
.tcf-ebl .ebl-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 20px;
}

.tcf-ebl .ebl-sec-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.028em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-sec-sub {
    max-width: 640px;
    margin-top: 6px;
    font-size: 15px;
    color: var(--ebl-text);
}

/* ==========================================================================
   Carte des atouts (chevauche l'en-tête) : un mini-aperçu vivant par atout
   ========================================================================== */
.tcf-ebl .ebl-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 18px;
    box-shadow: var(--ebl-shadow-lg);
}

.tcf-ebl .ebl-features .ebl-feature {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 8px 8px 14px;
}

.tcf-ebl .ebl-feature > b {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-feature > span:last-child {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ebl-muted);
}

/* Cadre commun des mini-aperçus */
.tcf-ebl .ebl-viz {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    margin-bottom: 12px;
    padding: 0 12px;
    overflow: hidden;
    background-color: var(--ebl-soft);
    background-image: radial-gradient(rgba(16, 24, 40, 0.06) 1px, transparent 1px);
    background-size: 12px 12px;
    border: 1px solid var(--ebl-line);
    border-radius: 12px;
}

/* Semaine : le samedi en relief */
.tcf-ebl .ebl-viz--week {
    gap: 4px;
}

.tcf-ebl .ebl-viz--week i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 30px;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 7px;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    color: var(--ebl-faint);
}

.tcf-ebl .ebl-viz--week i.is-on {
    position: relative;
    width: 30px;
    height: 44px;
    background: var(--ebl-blue);
    border-color: var(--ebl-blue);
    box-shadow: 0 8px 16px -6px rgba(19, 99, 223, 0.55);
    font-size: 13px;
    color: #fff;
}

.tcf-ebl .ebl-viz--week i.is-on::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: #FBBF24;
}

/* Chronomètre qui défile */
.tcf-ebl .ebl-viz--timer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0 16px;
}

.tcf-ebl .ebl-viz-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ebl-ink);
}

.tcf-ebl .ebl-viz-time svg {
    width: 18px;
    height: 18px;
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-viz-time b {
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    line-height: 1;
}

.tcf-ebl .ebl-viz-track {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--ebl-blue-100);
}

.tcf-ebl .ebl-viz-track i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: var(--ebl-blue);
    transition: width 1s linear;
}

/* Copie corrigée : lignes de texte, une erreur relevée, la note */
.tcf-ebl .ebl-viz--note {
    justify-content: space-between;
    gap: 14px;
    padding: 0 14px;
}

.tcf-ebl .ebl-viz-lines {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;
}

.tcf-ebl .ebl-viz-lines i {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--ebl-line-strong);
}

.tcf-ebl .ebl-viz-lines i:nth-child(2) {
    width: 82%;
}

.tcf-ebl .ebl-viz-lines i:nth-child(3) {
    width: 58%;
}

.tcf-ebl .ebl-viz-lines i.is-err {
    background: linear-gradient(90deg, var(--ebl-line-strong) 30%, #F87171 30%, #F87171 62%, var(--ebl-line-strong) 62%);
}

.tcf-ebl .ebl-viz--note b {
    display: flex;
    align-items: baseline;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 10px;
    box-shadow: var(--ebl-shadow-xs);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-viz--note b small {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ebl-muted);
}

/* Niveaux par compétence : quatre barres, la plus faible en orange */
.tcf-ebl .ebl-viz--bars {
    align-items: stretch;
    gap: 12px;
    padding: 8px 12px 6px;
}

.tcf-ebl .ebl-viz-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    width: 26px;
}

.tcf-ebl .ebl-viz-bar em {
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    color: var(--ebl-ink);
}

.tcf-ebl .ebl-viz-bar i {
    display: block;
    width: 14px;
    height: calc(var(--h) * 0.55);
    border-radius: 4px 4px 2px 2px;
    background: var(--ebl-blue);
}

.tcf-ebl .ebl-viz-bar.is-low i {
    background: var(--ebl-orange);
}

.tcf-ebl .ebl-viz-bar small {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ebl-faint);
}

/* ==========================================================================
   Méthode : un cycle d'une semaine (4 étapes autour d'un moyeu)
   ========================================================================== */
.tcf-ebl .ebl-method {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
}

.tcf-ebl .ebl-method-intro .ebl-btn {
    margin-top: 28px;
}

.tcf-ebl .ebl-cycle {
    position: relative;
}

.tcf-ebl .ebl-msteps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

/* Quatre cartes pleines, du bleu de la marque au bleu nuit dans l'ordre de la boucle (01 → 04) :
   le cycle « s'approfondit » à chaque étape, et les deux rangées pèsent autant l'une que l'autre.
   Même trame fine que les autres blocs bleus de la page (en-tête, bande de chiffres, appel final). */
.tcf-ebl .ebl-msteps .ebl-mstep {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 22px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--ebl-step-bg, var(--ebl-blue));
    border-radius: 18px;
    color: #fff;
}

.tcf-ebl .ebl-msteps .ebl-mstep--1 {
    --ebl-step-bg: #1363DF;
}

.tcf-ebl .ebl-msteps .ebl-mstep--2 {
    --ebl-step-bg: #0F50B4;
}

.tcf-ebl .ebl-msteps .ebl-mstep--3 {
    --ebl-step-bg: #0C3D89;
}

.tcf-ebl .ebl-msteps .ebl-mstep--4 {
    --ebl-step-bg: var(--ebl-navy);
}

.tcf-ebl .ebl-mstep-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.tcf-ebl .ebl-mstep-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    color: #fff;
}

.tcf-ebl .ebl-mstep-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
}

/* Grand numéro en filigrane, chiffres à chasse fixe */
.tcf-ebl .ebl-mstep-num {
    font-size: 40px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.28);
}

.tcf-ebl .ebl-mstep-when {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #DCE8FF; /* contraste suffisant même sur la carte la plus claire */
}

.tcf-ebl .ebl-mstep h3 {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #fff;
}

.tcf-ebl .ebl-mstep-text {
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

/* Flèches : vers le bas sur téléphone ; en cycle (tablette et plus), elles tournent autour du moyeu */
.tcf-ebl .ebl-mstep-arrow {
    position: absolute;
    left: 50%;
    bottom: -24px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 50%;
    box-shadow: var(--ebl-shadow-sm);
    color: var(--ebl-blue);
    transform: rotate(90deg);
}

.tcf-ebl .ebl-mstep-arrow svg {
    width: 15px;
    height: 15px;
}

.tcf-ebl .ebl-mstep--4 .ebl-mstep-arrow {
    display: none;
}

.tcf-ebl .ebl-cycle-hub {
    display: none;
}

.tcf-ebl .ebl-cycle-loop {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--ebl-blue-50);
    border: 1px dashed var(--ebl-blue-200);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ebl-blue-700);
}

.tcf-ebl .ebl-cycle-loop svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Aperçu des résultats : carte des niveaux, extrait de correction, objectif
   ========================================================================== */
.tcf-ebl .ebl-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.tcf-ebl .ebl-checks {
    display: grid;
    gap: 20px;
    margin-top: 28px;
}

.tcf-ebl .ebl-checks li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
}

.tcf-ebl .ebl-checks-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ebl-blue-50);
    box-shadow: inset 0 0 0 1px var(--ebl-blue-100);
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-checks-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

.tcf-ebl .ebl-checks strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-checks div span {
    display: block;
    margin-top: 3px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ebl-text);
}

/* Composition posée sur un fond quadrillé qui s'estompe */
.tcf-ebl .ebl-mock {
    position: relative;
    margin: 0;
    padding: 34px 14px 20px;
}

.tcf-ebl .ebl-mock::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 24px;
    background-color: var(--ebl-blue-50);
    background-image:
        linear-gradient(var(--ebl-blue-100) 1px, transparent 1px),
        linear-gradient(90deg, var(--ebl-blue-100) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 45%, transparent 100%);
    mask-image: radial-gradient(120% 90% at 50% 40%, #000 45%, transparent 100%);
}

.tcf-ebl .ebl-mock-card {
    position: relative;
    z-index: 1;
    padding: 24px 20px;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 16px;
    box-shadow: var(--ebl-shadow-lg);
}

.tcf-ebl .ebl-mock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ebl-line);
}

.tcf-ebl .ebl-mock-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-mock-tag {
    padding: 2px 8px;
    background: var(--ebl-soft);
    border: 1px solid var(--ebl-line);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-mock-rows {
    display: grid;
    gap: 6px;
    padding-top: 14px;
}

.tcf-ebl .ebl-mock-rows li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
}

.tcf-ebl .ebl-mock-rows li.is-low {
    background: var(--ebl-orange-soft);
}

.tcf-ebl .ebl-mock-skill {
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ebl-ink);
}

.tcf-ebl .ebl-mock-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--ebl-blue-50);
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-mock-icon svg {
    width: 15px;
    height: 15px;
}

.tcf-ebl .ebl-mock-value {
    grid-column: 2;
    grid-row: 1;
    font-size: 12px;
    font-weight: 500;
    color: var(--ebl-muted);
    white-space: nowrap;
}

.tcf-ebl .ebl-mock-value b {
    margin-right: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-mock-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--ebl-blue-100);
}

.tcf-ebl .ebl-mock-bar i {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: 3px;
    background: var(--ebl-blue);
}

.tcf-ebl .ebl-mock-rows li.is-low .ebl-mock-bar {
    background: #FED7AA;
}

.tcf-ebl .ebl-mock-rows li.is-low .ebl-mock-bar i {
    background: var(--ebl-orange);
}

.tcf-ebl .ebl-mock-flag {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid #FED7AA;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ebl-orange-ink);
}

/* Extrait de correction : déborde sous la carte des niveaux, décalé à droite */
.tcf-ebl .ebl-mock-note {
    position: relative;
    z-index: 2;
    margin: -18px -4px 0 18px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.04), 0 24px 48px -12px rgba(16, 24, 40, 0.22);
}

.tcf-ebl .ebl-mock-note-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tcf-ebl .ebl-mock-note-name {
    flex: 1 1 auto;
    min-width: 0;
}

.tcf-ebl .ebl-mock-note-name b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ebl-ink);
}

.tcf-ebl .ebl-mock-note-name small {
    display: block;
    font-size: 12px;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-mock-note-head strong {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-mock-note-head strong small {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ebl-muted);
}

/* Phrase de la copie : sur fond gris clair, comme un extrait cité */
.tcf-ebl .ebl-mock-note-text {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--ebl-soft);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ebl-ink);
}

/* Erreur relevée : soulignement ondulé rouge, comme dans un correcteur */
.tcf-ebl .ebl-mock-note-text mark {
    padding: 0 2px;
    background: #FEF2F2;
    border-radius: 3px;
    color: #B91C1C;
    text-decoration: underline wavy #EF4444;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.tcf-ebl .ebl-mock-note-fix {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--ebl-line-strong);
    font-size: 13px;
    color: var(--ebl-text);
}

.tcf-ebl .ebl-mock-note-fix svg {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--ebl-green-ink);
    stroke-width: 2.5;
}

.tcf-ebl .ebl-mock-note-fix b {
    font-weight: 600;
    color: var(--ebl-green-ink);
}

/* Objectif : pastille posée sur le haut de la carte */
.tcf-ebl .ebl-mock-goal {
    position: absolute;
    top: 14px;
    right: 26px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--ebl-ink);
    border-radius: 999px;
    box-shadow: 0 10px 24px -8px rgba(11, 18, 32, 0.5);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.tcf-ebl .ebl-mock-goal svg {
    width: 15px;
    height: 15px;
    color: #FBBF24;
}

.tcf-ebl .ebl-mock-goal b {
    font-weight: 600;
    color: #fff;
}

/* Arrivée à l'écran (script présent) : barres qui se remplissent, correction qui glisse */
.tcf-ebl.is-js .ebl-mock-bar i {
    width: 0;
    transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tcf-ebl.is-js .ebl-mock.is-visible .ebl-mock-bar i {
    width: var(--w);
}

.tcf-ebl.is-js .ebl-mock-rows li:nth-child(2) .ebl-mock-bar i {
    transition-delay: 0.1s;
}

.tcf-ebl.is-js .ebl-mock-rows li:nth-child(3) .ebl-mock-bar i {
    transition-delay: 0.2s;
}

.tcf-ebl.is-js .ebl-mock-rows li:nth-child(4) .ebl-mock-bar i {
    transition-delay: 0.3s;
}

.tcf-ebl.is-js .ebl-mock-note,
.tcf-ebl.is-js .ebl-mock-goal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
}

.tcf-ebl.is-js .ebl-mock.is-visible .ebl-mock-note,
.tcf-ebl.is-js .ebl-mock.is-visible .ebl-mock-goal {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   Les 4 épreuves : frise du jour J, largeur proportionnelle à la durée
   ========================================================================== */
.tcf-ebl .ebl-tl {
    --ebl-tl-pause: 14px;
    margin: 0;
    padding: 20px 16px;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 18px;
    box-shadow: var(--ebl-shadow-md);
}

.tcf-ebl .ebl-tl-track {
    display: grid;
    gap: 12px 4px;
}

.tcf-ebl .ebl-tl-session {
    grid-row: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-bottom: 12px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-tl-session b {
    font-size: 14px;
    font-weight: 700;
    color: var(--ebl-heading);
}

/* Accolade de la session : trait fin sous son nom */
.tcf-ebl .ebl-tl-session::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--ebl-blue);
}

.tcf-ebl .ebl-tl-session--2::after {
    background: var(--ebl-navy);
}

.tcf-ebl .ebl-tl-seg {
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: 52px;
    overflow: hidden;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    container-type: inline-size;
}

.tcf-ebl .ebl-tl-seg svg {
    width: 18px;
    height: 18px;
}

.tcf-ebl .ebl-tl-seg--co {
    background: var(--ebl-blue);
}

.tcf-ebl .ebl-tl-seg--ce {
    background: var(--ebl-blue-700);
}

.tcf-ebl .ebl-tl-seg--eo {
    background: #0A3A82;
}

.tcf-ebl .ebl-tl-seg--ee {
    background: var(--ebl-navy);
}

/* Segment étroit (expression orale, 12 min) : l'icône seule, puis rien */
@container (max-width: 84px) {
    .tcf-ebl .ebl-tl-seg span {
        display: none;
    }
}

@container (max-width: 28px) {
    .tcf-ebl .ebl-tl-seg svg {
        display: none;
    }
}

/* Pause entre les deux sessions : case hachurée en pointillés */
.tcf-ebl .ebl-tl-pause {
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(16, 24, 40, 0.06) 6px 7px);
    border: 1px dashed var(--ebl-line-strong);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-tl-pause span {
    display: none;
}

/* Arrivée à l'écran : les épreuves se dessinent l'une après l'autre */
.tcf-ebl.is-js .ebl-tl-seg,
.tcf-ebl.is-js .ebl-tl-pause {
    clip-path: inset(0 100% 0 0 round 10px);
    transition: clip-path 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tcf-ebl.is-js .ebl-tl.is-visible .ebl-tl-seg,
.tcf-ebl.is-js .ebl-tl.is-visible .ebl-tl-pause {
    clip-path: inset(0 0 0 0 round 10px);
}

.tcf-ebl.is-js .ebl-tl-seg--ce {
    transition-delay: 0.25s;
}

.tcf-ebl.is-js .ebl-tl-pause {
    transition-delay: 0.5s;
}

.tcf-ebl.is-js .ebl-tl-seg--eo {
    transition-delay: 0.65s;
}

.tcf-ebl.is-js .ebl-tl-seg--ee {
    transition-delay: 0.8s;
}

.tcf-ebl .ebl-tl-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ebl-line);
}

.tcf-ebl .ebl-tl-list .ebl-tl-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.tcf-ebl .ebl-tl-num {
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.tcf-ebl .ebl-tl-item--co .ebl-tl-num {
    background: var(--ebl-blue);
}

.tcf-ebl .ebl-tl-item--ce .ebl-tl-num {
    background: var(--ebl-blue-700);
}

.tcf-ebl .ebl-tl-item--eo .ebl-tl-num {
    background: #0A3A82;
}

.tcf-ebl .ebl-tl-item--ee .ebl-tl-num {
    background: var(--ebl-navy);
}

.tcf-ebl .ebl-tl-item b {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-tl-item > span:last-child {
    font-size: 13.5px;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-tl-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ebl-line);
    font-size: 14px;
    color: var(--ebl-text);
}

.tcf-ebl .ebl-tl-foot span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tcf-ebl .ebl-tl-foot svg {
    width: 16px;
    height: 16px;
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-tl-foot b {
    font-weight: 700;
    color: var(--ebl-heading);
}

/* ==========================================================================
   Bande de chiffres : une ligne de texte qui défile en continu
   ========================================================================== */
.tcf-ebl .ebl-band--blue {
    padding: 22px 0;
}

.tcf-ebl .ebl-ticker {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.tcf-ebl .ebl-ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: ebl-ticker 70s linear infinite;
}

.tcf-ebl .ebl-ticker:hover .ebl-ticker-track {
    animation-play-state: paused;
}

/* Trois copies de la ligne : on avance d'une copie, puis on boucle */
@keyframes ebl-ticker {
    to {
        transform: translateX(-33.3333%);
    }
}

/* Le chiffre en gras, son libellé plus petit et plus léger : on lit d'abord la valeur */
.tcf-ebl .ebl-ticker-item {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 26px;
    white-space: nowrap;
}

.tcf-ebl .ebl-ticker-item b {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}

.tcf-ebl .ebl-ticker-item em {
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, 0.78);
}

.tcf-ebl .ebl-ticker-sep {
    display: inline-flex;
    color: #FCD34D;
}

.tcf-ebl .ebl-ticker-sep svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ==========================================================================
   Examens disponibles : cartes illustrées
   ========================================================================== */
.tcf-ebl .ebl-ex-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 28px;
}

.tcf-ebl .ebl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 12px;
    box-shadow: var(--ebl-shadow-xs);
}

.tcf-ebl .ebl-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    padding: 6px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-family: var(--ebl-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ebl-text);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tcf-ebl .ebl-filter span {
    color: var(--ebl-faint);
}

.tcf-ebl .ebl-filter:hover {
    background: var(--ebl-soft);
    color: var(--ebl-ink);
}

.tcf-ebl .ebl-filter[aria-pressed="true"] {
    background: var(--ebl-ink);
    color: #fff;
}

.tcf-ebl .ebl-filter[aria-pressed="true"] span {
    color: rgba(255, 255, 255, 0.6);
}

.tcf-ebl .ebl-filter:focus-visible {
    outline: 2px solid var(--ebl-blue);
    outline-offset: 2px;
}

.tcf-ebl .ebl-ex-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.tcf-ebl .ebl-xcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 16px;
    box-shadow: var(--ebl-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tcf-ebl .ebl-xcard:hover {
    box-shadow: var(--ebl-shadow-md);
    transform: translateY(-2px);
}

.tcf-ebl .ebl-xcard[hidden] {
    display: none;
}

/* Couverture : bleu de la marque et trame de cahier, la date en grand */
.tcf-ebl .ebl-xcard-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120px;
    padding: 16px 18px 18px;
    background-color: #2C6BE6;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 22px 22px;
    color: #fff;
}

.tcf-ebl .ebl-xcard.is-latest .ebl-xcard-cover {
    background-color: var(--ebl-blue);
}

.tcf-ebl .ebl-xcard--done .ebl-xcard-cover {
    background-color: var(--ebl-navy);
}

.tcf-ebl .ebl-xcard--progress .ebl-xcard-cover {
    background-color: var(--ebl-blue-700);
}

.tcf-ebl .ebl-xcard-weekday {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.tcf-ebl .ebl-xcard-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.tcf-ebl .ebl-xcard-date b {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: #fff;
}

/* Étiquette en haut à droite de la couverture */
.tcf-ebl .ebl-xcard-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 999px;
    box-shadow: var(--ebl-shadow-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-xcard.is-latest .ebl-xcard-tag {
    background: #FBBF24;
    border-color: #FBBF24;
    color: var(--ebl-navy);
}

.tcf-ebl .ebl-xcard--done .ebl-xcard-tag {
    color: var(--ebl-green-ink);
}

.tcf-ebl .ebl-xcard--progress .ebl-xcard-tag {
    color: var(--ebl-orange-ink);
}

.tcf-ebl .ebl-xcard-body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 22px 18px 16px;
}

/* Billet : pointillés de découpe et deux encoches (couleur du fond de la bande) */
.tcf-ebl .ebl-xcard-body::before {
    content: "";
    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;
    border-top: 1.5px dashed var(--ebl-line-strong);
}

.tcf-ebl .ebl-xcard-body::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    left: -10px;
    height: 20px;
    background:
        radial-gradient(circle at 10px 10px, var(--ebl-notch, #fff) 9px, var(--ebl-line) 9px 10px, transparent 10.5px) left / 20px 20px no-repeat,
        radial-gradient(circle at 10px 10px, var(--ebl-notch, #fff) 9px, var(--ebl-line) 9px 10px, transparent 10.5px) right / 20px 20px no-repeat;
    pointer-events: none;
}

.tcf-ebl .ebl-xcard-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-xcard-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-xcard-meta svg {
    width: 14px;
    height: 14px;
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-xcard-foot {
    padding: 0 18px 18px;
}

.tcf-ebl .ebl-xcard-foot .ebl-btn {
    width: 100%;
}

/* Carte « Prochain examen » : en pointillés, couverture lavande */
.tcf-ebl .ebl-xcard--next {
    background: #fff;
    border: 1px dashed var(--ebl-blue-200);
    box-shadow: none;
}

.tcf-ebl .ebl-xcard--next:hover {
    box-shadow: none;
    transform: none;
}

.tcf-ebl .ebl-xcard--next .ebl-xcard-cover {
    background-color: var(--ebl-blue-50);
    background-image:
        linear-gradient(rgba(19, 99, 223, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(19, 99, 223, 0.07) 1px, transparent 1px);
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-xcard--next .ebl-xcard-weekday,
.tcf-ebl .ebl-xcard--next .ebl-xcard-date {
    color: var(--ebl-blue-700);
}

.tcf-ebl .ebl-xcard--next .ebl-xcard-date b {
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-xcard--next .ebl-xcard-tag {
    background: var(--ebl-blue);
    border-color: var(--ebl-blue);
    color: #fff;
}

.tcf-ebl .ebl-xcard-count {
    margin-top: auto;
    padding: 10px 12px;
    background: var(--ebl-blue-50);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ebl-blue-700);
}

.tcf-ebl .ebl-xcard-count strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Lien de test réservé à l'équipe, sous le compte à rebours d'un examen déjà ajouté */
.tcf-ebl .ebl-xcard-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ebl-blue-700);
    text-decoration: none;
}

.tcf-ebl .ebl-xcard-preview svg {
    width: 14px;
    height: 14px;
}

.tcf-ebl .ebl-xcard-preview:hover {
    color: var(--ebl-blue);
    text-decoration: underline;
}

/* Carte d'explication : comble la première rangée tant qu'il y a peu d'examens (masquée sur téléphone) */
.tcf-ebl .ebl-xfill {
    position: relative;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 28px;
    overflow: hidden;
    background-color: var(--ebl-blue-50);
    background-image:
        linear-gradient(var(--ebl-blue-100) 1px, transparent 1px),
        linear-gradient(90deg, var(--ebl-blue-100) 1px, transparent 1px);
    background-size: 28px 28px;
    border: 1px solid var(--ebl-blue-100);
    border-radius: 16px;
}

/* Le quadrillage s'efface sous le texte */
.tcf-ebl .ebl-xfill::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--ebl-blue-50) 45%, rgba(240, 245, 255, 0.6));
}

.tcf-ebl .ebl-xfill > * {
    position: relative;
}

.tcf-ebl .ebl-xfill[hidden] {
    display: none;
}

.tcf-ebl .ebl-xfill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border: 1px solid var(--ebl-blue-100);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--ebl-shadow-xs);
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-xfill-icon svg {
    width: 22px;
    height: 22px;
}

.tcf-ebl .ebl-xfill-title {
    max-width: 420px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.022em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-xfill-text {
    max-width: 440px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ebl-text);
}

.tcf-ebl .ebl-xfill-link,
.tcf-ebl .ebl-xfill-link:hover,
.tcf-ebl .ebl-xfill-link:focus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-xfill-link svg {
    width: 16px;
    height: 16px;
}

/* Notes et niveaux par épreuve (2 colonnes alignées), avancement */
.tcf-ebl .ebl-scores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 6px;
}

.tcf-ebl .ebl-scores .ebl-score {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    padding: 5px 8px;
    background: var(--ebl-soft);
    border: 1px solid var(--ebl-line);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-score b {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ebl-ink);
    white-space: nowrap;
}

.tcf-ebl .ebl-score b small {
    font-size: 11px;
    font-weight: 500;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-score em {
    margin-left: auto;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    color: var(--ebl-muted);
    white-space: nowrap;
}

.tcf-ebl .ebl-scores .ebl-score.is-low {
    background: var(--ebl-red-soft);
    border-color: #FECACA;
}

.tcf-ebl .ebl-progress {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-progress i {
    display: block;
    width: 96px;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--ebl-line);
}

.tcf-ebl .ebl-progress i::after {
    content: "";
    display: block;
    width: var(--p, 0%);
    height: 100%;
    border-radius: 3px;
    background: var(--ebl-orange);
}

.tcf-ebl .ebl-empty {
    grid-column: 1 / -1;
    padding: 28px 16px;
    font-size: 15px;
    text-align: center;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-empty[hidden] {
    display: none;
}

.tcf-ebl .ebl-more {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.tcf-ebl .ebl-more[hidden] {
    display: none;
}

/* ==========================================================================
   Témoignages : mur de captures qui défile, sur fond sombre
   ========================================================================== */
.tcf-ebl .ebl-testi {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.tcf-ebl .ebl-testi-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.tcf-ebl .ebl-wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    height: 460px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}

.tcf-ebl .ebl-wall-col--3 {
    display: none;
}

.tcf-ebl .ebl-wall-track {
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: ebl-wall-up 44s linear infinite;
}

.tcf-ebl .ebl-wall-col--2 .ebl-wall-track {
    animation-name: ebl-wall-down;
    animation-duration: 52s;
}

.tcf-ebl .ebl-wall-col--3 .ebl-wall-track {
    animation-duration: 48s;
}

/* Survol ou focus clavier : le mur s'arrête pour qu'on puisse lire ou cliquer */
.tcf-ebl .ebl-wall:hover .ebl-wall-track,
.tcf-ebl .ebl-wall:focus-within .ebl-wall-track {
    animation-play-state: paused;
}

/* Une liste et sa copie : on remonte d'une liste + un espacement, puis on boucle */
@keyframes ebl-wall-up {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(calc(-50% - 7px));
    }
}

@keyframes ebl-wall-down {
    from {
        transform: translateY(calc(-50% - 7px));
    }

    to {
        transform: translateY(0);
    }
}

.tcf-ebl .ebl-wall-item {
    display: block;
    overflow: hidden;
    background: #0F1D3A;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s ease;
}

.tcf-ebl .ebl-wall-item:hover {
    border-color: rgba(255, 255, 255, 0.32);
}

.tcf-ebl .ebl-wall-item:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.tcf-ebl .ebl-wall-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Indication « cliquez pour agrandir » (l'animation du mur n'est pas touchée) */
.tcf-ebl .ebl-wall-wrap {
    position: relative;
}

.tcf-ebl .ebl-wall-item {
    position: relative;
    cursor: zoom-in;
}

/* Loupe au survol de chaque capture */
.tcf-ebl .ebl-wall-zoom {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(6, 18, 43, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tcf-ebl .ebl-wall-zoom svg {
    width: 15px;
    height: 15px;
}

.tcf-ebl .ebl-wall-item:hover .ebl-wall-zoom,
.tcf-ebl .ebl-wall-item:focus-visible .ebl-wall-zoom {
    opacity: 1;
}

/* Pastille posée sur le bas estompé du mur ; elle laisse passer les clics */
.tcf-ebl .ebl-wall-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: #fff;
    transform: translateX(-50%);
    pointer-events: none;
}

.tcf-ebl .ebl-wall-hint svg {
    width: 15px;
    height: 15px;
    color: #8DB5FF;
}

.tcf-ebl .ebl-wall-hint--touch {
    display: none;
}

/* Écran tactile : « Touchez » au lieu de « Cliquez » */
@media (hover: none), (pointer: coarse) {
    .tcf-ebl .ebl-wall-hint--click {
        display: none;
    }

    .tcf-ebl .ebl-wall-hint--touch {
        display: inline;
    }
}

/* Capture en grand */
.tcf-ebl .ebl-zoom {
    width: auto;
    max-width: min(520px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    margin: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
}

.tcf-ebl .ebl-zoom[open] {
    animation: ebl-modal-in 0.2s ease;
}

.tcf-ebl .ebl-zoom::backdrop {
    background: rgba(6, 18, 43, 0.85);
}

.tcf-ebl .ebl-zoom img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 48px);
    border-radius: 14px;
}

.tcf-ebl .ebl-zoom-close {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    color: var(--ebl-ink);
    cursor: pointer;
}

.tcf-ebl .ebl-zoom-close svg {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   FAQ : questions à droite (la question ouverte en bandeau bleu nuit),
   carte d'appel sombre + carte de contact accolées à gauche (sous les questions sur téléphone)
   ========================================================================== */
.tcf-ebl .ebl-faq {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

.tcf-ebl .ebl-faq-head {
    margin-bottom: 24px;
}

/* Deux barres obliques devant « FAQ » */
.tcf-ebl .ebl-slashes {
    display: inline-flex;
    gap: 3px;
    margin-right: 10px;
    vertical-align: -1px;
}

.tcf-ebl .ebl-slashes i {
    display: block;
    width: 4px;
    height: 12px;
    border-radius: 1px;
    background: var(--ebl-blue);
    transform: skewX(-20deg);
}

.tcf-ebl .ebl-slashes i + i {
    background: var(--ebl-blue-200);
}

/* Questions : lignes encadrées ; ouverte = bandeau bleu nuit + réponse sur fond blanc */
.tcf-ebl .ebl-qas {
    display: grid;
    gap: 10px;
}

.tcf-ebl .ebl-qa {
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tcf-ebl .ebl-qa:hover {
    border-color: var(--ebl-line-strong);
}

.tcf-ebl .ebl-qa[open] {
    border-color: var(--ebl-navy);
    box-shadow: var(--ebl-shadow-md);
}

.tcf-ebl .ebl-qa summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 16px 18px;
    list-style: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.tcf-ebl .ebl-qa summary::-webkit-details-marker {
    display: none;
}

.tcf-ebl .ebl-qa summary:focus-visible {
    outline: 2px solid var(--ebl-blue);
    outline-offset: -2px;
}

.tcf-ebl .ebl-qa[open] summary {
    background: var(--ebl-navy);
}

.tcf-ebl .ebl-qa-q {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--ebl-heading);
    transition: color 0.2s ease;
}

.tcf-ebl .ebl-qa[open] .ebl-qa-q {
    color: #fff;
}

/* Rond plein « + » qui devient « − » (la barre verticale s'efface) */
.tcf-ebl .ebl-qa-icon {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ebl-navy);
    transition: background 0.2s ease;
}

.tcf-ebl .ebl-qa-icon::before,
.tcf-ebl .ebl-qa-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    margin: -1px 0 0 -5px;
    border-radius: 1px;
    background: #fff;
    transition: transform 0.2s ease, background 0.2s ease;
}

.tcf-ebl .ebl-qa-icon::after {
    transform: rotate(90deg);
}

.tcf-ebl .ebl-qa[open] .ebl-qa-icon {
    background: #fff;
}

.tcf-ebl .ebl-qa[open] .ebl-qa-icon::before,
.tcf-ebl .ebl-qa[open] .ebl-qa-icon::after {
    background: var(--ebl-navy);
}

.tcf-ebl .ebl-qa[open] .ebl-qa-icon::after {
    transform: rotate(90deg) scaleX(0);
}

.tcf-ebl .ebl-qa-a {
    padding: 16px 18px 20px;
}

.tcf-ebl .ebl-qa-a p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ebl-text);
}

/* Ouverture animée là où le navigateur sait animer un <details> (sinon : ouverture directe) */
.tcf-ebl .ebl-qa::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
}

.tcf-ebl .ebl-qa[open]::details-content {
    block-size: auto;
}

/* Colonne de gauche : deux cartes accolées dans un même cadre */
.tcf-ebl .ebl-faq-aside {
    display: grid;
    align-self: start;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 18px;
    box-shadow: var(--ebl-shadow-md);
}

/* Carte d'appel : bleu nuit tramé, halo, grande icône en filigrane */
.tcf-ebl .ebl-faq-promo {
    position: relative;
    overflow: hidden;
    padding: 30px 24px;
    background:
        radial-gradient(360px 240px at 100% 0%, rgba(19, 99, 223, 0.55), transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--ebl-navy);
    color: #fff;
}

.tcf-ebl .ebl-faq-promo > * {
    position: relative;
}

.tcf-ebl .ebl-faq-promo .ebl-faq-promo-art {
    position: absolute;
    right: -26px;
    bottom: -30px;
    width: 160px;
    height: 160px;
    color: rgba(255, 255, 255, 0.08);
}

.tcf-ebl .ebl-faq-promo-art svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

.tcf-ebl .ebl-faq-promo-title {
    max-width: 16ch;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #fff;
}

.tcf-ebl .ebl-faq-promo-text {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

.tcf-ebl .ebl-faq-promo .ebl-btn {
    margin-top: 20px;
}

.tcf-ebl .ebl-faq-promo .ebl-btn:focus-visible {
    outline-color: #fff;
}

/* Carte de contact : centrée, rond WhatsApp */
.tcf-ebl .ebl-faq-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 24px 28px;
    text-align: center;
}

.tcf-ebl .ebl-faq-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.14);
    color: #fff;
}

.tcf-ebl .ebl-faq-contact-icon svg {
    width: 24px;
    height: 24px;
}

.tcf-ebl .ebl-faq-contact-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-faq-contact-text {
    max-width: 32ch;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-faq-contact .ebl-btn {
    margin-top: 16px;
}

/* ==========================================================================
   Classement de la semaine : top 5 du dernier examen, ligne de l'élève, encouragement
   ========================================================================== */
.tcf-ebl .ebl-lb {
    max-width: 980px;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 20px;
    box-shadow: var(--ebl-shadow-lg);
}

.tcf-ebl .ebl-lb-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--ebl-line);
}

.tcf-ebl .ebl-lb-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tcf-ebl .ebl-lb-title-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #FFF7E0;
    color: #D97706;
}

.tcf-ebl .ebl-lb-title-icon svg {
    width: 20px;
    height: 20px;
}

.tcf-ebl .ebl-lb-title b {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-lb-title small {
    display: block;
    font-size: 13px;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-lb-how {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--ebl-muted);
}

/* En-têtes de colonnes (grand écran seulement) */
.tcf-ebl .ebl-lb-cols {
    display: none;
}

/* Une ligne : rang, avatar, nom + pays, score ; les notes passent dessous sur téléphone */
.tcf-ebl .ebl-lb-list {
    margin: 0;
    padding: 0;
}

.tcf-ebl .ebl-lb-list .ebl-lb-row {
    display: grid;
    grid-template-columns: 32px 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--ebl-line);
}

.tcf-ebl .ebl-lb-list .ebl-lb-row:first-child {
    border-top: 0;
}

.tcf-ebl .ebl-lb-list .ebl-lb-row.is-rank-1 {
    background: #FFFCF2;
}

/* Élève connecté : fond bleuté, contour fin sur tout le tour, pastille « Vous » */
.tcf-ebl .ebl-lb-list .ebl-lb-row.is-me {
    background: var(--ebl-blue-50);
    box-shadow: inset 0 0 0 1px var(--ebl-blue-200);
}

.tcf-ebl .ebl-lb-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ebl-soft);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ebl-muted);
}

/* Médailles : or, argent, bronze */
.tcf-ebl .is-rank-1 .ebl-lb-rank {
    background: #F5B301;
    box-shadow: 0 0 0 4px #FDEFC2;
    color: #4A3200;
}

.tcf-ebl .is-rank-2 .ebl-lb-rank {
    background: #CBD5E1;
    box-shadow: 0 0 0 4px #EEF2F6;
    color: #1E293B;
}

.tcf-ebl .is-rank-3 .ebl-lb-rank {
    background: #E3A877;
    box-shadow: 0 0 0 4px #F8E6D7;
    color: #4A230A;
}

.tcf-ebl .ebl-lb-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--av, var(--ebl-blue));
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}

.tcf-ebl .ebl-lb-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tcf-ebl .ebl-lb-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tcf-ebl .ebl-lb-name-text {
    overflow: hidden;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-lb-me {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ebl-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}

.tcf-ebl .ebl-lb-country {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-lb-country img {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.08);
    object-fit: cover;
}

.tcf-ebl .ebl-lb-notes {
    grid-column: 1 / -1; /* téléphone : toute la largeur, les 4 notes (CO/CE sur 699) tiennent sur une ligne */
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tcf-ebl .ebl-lb-note {
    padding: 3px 5px;
    background: #fff;
    border: 1px solid var(--ebl-line);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-lb-note b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-lb-score {
    grid-column: 4;
    grid-row: 1;
    text-align: right;
    white-space: nowrap;
}

.tcf-ebl .ebl-lb-score b {
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-lb-score small {
    margin-left: 1px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ebl-faint);
}

/* Place libre (moins de 5 classés) */
.tcf-ebl .ebl-lb-row.is-empty .ebl-lb-avatar {
    background: #fff;
    border: 1.5px dashed var(--ebl-line-strong);
    color: var(--ebl-faint);
}

.tcf-ebl .ebl-lb-row.is-empty .ebl-lb-name-text {
    font-weight: 600;
    color: var(--ebl-muted);
}

/* « … » entre le top 5 et la ligne de l'élève */
.tcf-ebl .ebl-lb-gap {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid var(--ebl-line);
}

.tcf-ebl .ebl-lb-gap span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ebl-line-strong);
}

.tcf-ebl .ebl-lb-list--me .ebl-lb-row:first-child {
    border-top: 0;
}

/* Encouragement : entrer dans le top, s'y maintenir */
.tcf-ebl .ebl-lb-cta {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    background: var(--ebl-blue-50);
    border-top: 1px solid var(--ebl-blue-100);
}

.tcf-ebl .ebl-lb-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--ebl-shadow-xs);
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-lb-cta.is-top .ebl-lb-cta-icon {
    background: #F5B301;
    color: #4A3200;
}

.tcf-ebl .ebl-lb-cta-icon svg {
    width: 20px;
    height: 20px;
}

.tcf-ebl .ebl-lb-cta-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-lb-cta-text p:not(.ebl-lb-cta-title) {
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ebl-text);
}

.tcf-ebl .ebl-lb-cta .ebl-btn {
    grid-column: 1 / -1;
}

/* Grand écran : une ligne par candidat, colonnes alignées (notes à largeur fixe) */
@media (min-width: 820px) {
    .tcf-ebl .ebl-lb {
        --ebl-lb-grid: 40px 44px minmax(0, 1fr) 340px 84px;
    }

    .tcf-ebl .ebl-lb-head {
        padding: 20px 24px;
    }

    .tcf-ebl .ebl-lb-cols {
        display: grid;
        grid-template-columns: var(--ebl-lb-grid);
        gap: 16px;
        padding: 10px 24px;
        background: var(--ebl-soft);
        border-bottom: 1px solid var(--ebl-line);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ebl-faint);
    }

    .tcf-ebl .ebl-lb-cols span:nth-child(2) {
        grid-column: 2 / 4;
    }

    .tcf-ebl .ebl-lb-cols span:last-child {
        text-align: right;
    }

    .tcf-ebl .ebl-lb-list .ebl-lb-row {
        grid-template-columns: var(--ebl-lb-grid);
        gap: 16px;
        padding: 14px 24px;
    }

    .tcf-ebl .ebl-lb-rank {
        width: 36px;
        height: 36px;
    }

    .tcf-ebl .ebl-lb-avatar {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }

    .tcf-ebl .ebl-lb-notes {
        grid-column: 4;
        grid-row: 1;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .tcf-ebl .ebl-lb-note {
        padding: 3px 8px;
        font-size: 12px;
    }

    .tcf-ebl .ebl-lb-score {
        grid-column: 5;
    }

    .tcf-ebl .ebl-lb-score b {
        font-size: 24px;
    }

    .tcf-ebl .ebl-lb-cta {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 16px;
        padding: 20px 24px;
    }

    .tcf-ebl .ebl-lb-cta .ebl-btn {
        grid-column: auto;
    }
}

/* ==========================================================================
   Appel final : un grand compte à rebours jusqu'au prochain samedi
   ========================================================================== */
.tcf-ebl .ebl-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    overflow: hidden;
    background:
        radial-gradient(800px 380px at 50% -15%, rgba(255, 255, 255, 0.24), transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 44px 44px,
        var(--ebl-blue);
    border-radius: 24px;
    text-align: center;
    color: #fff;
}

.tcf-ebl .ebl-cta-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

.tcf-ebl .ebl-cta-kicker svg {
    width: 15px;
    height: 15px;
}

.tcf-ebl .ebl-cta-title {
    max-width: 820px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.028em;
    color: #fff;
    text-wrap: balance;
}

.tcf-ebl .ebl-cta-title em {
    color: #BFD5FF;
}

/* Les chiffres, très grands, à chasse fixe */
.tcf-ebl .ebl-cta-clock {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    margin: 28px 0 4px;
}

.tcf-ebl .ebl-cta-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 62px;
}

.tcf-ebl .ebl-cta-unit b {
    font-size: 48px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.035em;
    color: #fff;
}

.tcf-ebl .ebl-cta-unit small {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/* Hauteur = celle des chiffres : les deux-points restent centrés sur eux */
.tcf-ebl .ebl-cta-colon {
    display: flex;
    align-items: center;
    height: 48px;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    color: rgba(255, 255, 255, 0.35);
}

.tcf-ebl .ebl-cta-lede {
    max-width: 560px;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}

.tcf-ebl .ebl-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

.tcf-ebl .ebl-cta-checks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.tcf-ebl .ebl-cta-checks li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

.tcf-ebl .ebl-cta-checks svg {
    width: 20px;
    height: 20px;
    padding: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    stroke-width: 3;
}

/* ==========================================================================
   Progression (élève connecté)
   ========================================================================== */
.tcf-ebl .ebl-target {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-target-label {
    display: inline-flex;
    align-items: center;
}

.tcf-ebl .ebl-target-label label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ebl-muted);
    cursor: pointer;
}

.tcf-ebl .ebl-target select {
    min-height: 44px;
    padding: 8px 36px 8px 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid var(--ebl-line-strong);
    border-radius: 10px;
    box-shadow: var(--ebl-shadow-xs);
    font-family: var(--ebl-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--ebl-ink);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tcf-ebl .ebl-target select:focus {
    outline: none;
    border-color: var(--ebl-blue);
    box-shadow: 0 0 0 3px rgba(19, 99, 223, 0.12);
}

.tcf-ebl .ebl-target.is-saving select {
    opacity: 0.6;
}

.tcf-ebl .ebl-target-msg:empty {
    display: none;
}

.tcf-ebl .ebl-target-msg {
    font-size: 12px;
    font-weight: 500;
    color: var(--ebl-green-ink);
}

.tcf-ebl .ebl-target-msg.is-error {
    color: var(--ebl-red-ink);
}

.tcf-ebl .ebl-stats {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.tcf-ebl .ebl-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--ebl-soft);
    border: 1px solid var(--ebl-line);
    border-radius: 12px;
    color: var(--ebl-ink);
    text-decoration: none;
}

.tcf-ebl .ebl-stat--focus {
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tcf-ebl .ebl-stat--focus:hover {
    border-color: #FECACA;
    background: #FFFBFB;
}

.tcf-ebl .ebl-stat-link,
.tcf-ebl .ebl-stat-link:hover,
.tcf-ebl .ebl-stat-link:focus {
    color: inherit;
    text-decoration: none;
}

.tcf-ebl .ebl-stat-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
}

.tcf-ebl .ebl-stat-link:focus-visible {
    outline: none;
}

.tcf-ebl .ebl-stat-link:focus-visible::after {
    outline: 2px solid var(--ebl-blue);
    outline-offset: 2px;
}

.tcf-ebl .ebl-stat--focus .ebl-help {
    z-index: 2;
}

.tcf-ebl .ebl-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--ebl-shadow-xs);
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-stat-icon svg {
    width: 20px;
    height: 20px;
}

.tcf-ebl .ebl-stat--streak .ebl-stat-icon {
    color: var(--ebl-orange);
}

.tcf-ebl .ebl-stat--focus .ebl-stat-icon {
    color: #DC2626;
}

/* « À travailler » avant le premier examen terminé : carte en attente */
.tcf-ebl .ebl-stat--pending .ebl-stat-icon {
    color: var(--ebl-faint);
}

.tcf-ebl .ebl-stat--pending .ebl-stat-value {
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-stat-value {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.tcf-ebl .ebl-stat-value small {
    font-size: 13px;
    font-weight: 500;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-stat--focus .ebl-stat-value small {
    white-space: nowrap;
}

.tcf-ebl .ebl-stat-go {
    margin-left: auto;
    color: var(--ebl-faint);
}

.tcf-ebl .ebl-stat-go svg {
    width: 18px;
    height: 18px;
}

.tcf-ebl .ebl-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tcf-ebl .ebl-chart {
    position: relative;
    min-width: 0;
    padding: 14px 14px 10px;
    border: 1px solid var(--ebl-line);
    border-radius: 12px;
}

.tcf-ebl .ebl-chart-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 38px;
}

.tcf-ebl .ebl-chart-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-chart-delta {
    font-size: 12px;
    font-weight: 600;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-chart-delta.is-up {
    color: var(--ebl-green-ink);
}

.tcf-ebl .ebl-chart-delta.is-down {
    color: var(--ebl-red-ink);
}

/* Note du dernier examen en grand (« 512 /699 », « 14 /20 »), niveau CECR et NCLC dessous */
.tcf-ebl .ebl-chart-value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-top: 6px;
    line-height: 1.1;
}

.tcf-ebl .ebl-chart-value b {
    font-size: 28px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-chart-value b.is-none {
    color: var(--ebl-line-strong);
}

.tcf-ebl .ebl-chart-value small {
    font-size: 13px;
    font-weight: 600;
    color: var(--ebl-faint);
}

.tcf-ebl .ebl-chart-level {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-chart.is-empty .ebl-chart-level {
    color: var(--ebl-faint);
}

.tcf-ebl .ebl-chart-cecr {
    padding: 2px 7px;
    background: var(--ebl-blue-50);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ebl-blue-700);
}

/* Moins de deux examens : courbe à plat au niveau zéro et message au-dessus */
.tcf-ebl .ebl-spark-flat {
    position: absolute;
    right: 6px;
    bottom: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2px;
    border-radius: 2px;
    background: var(--ebl-line);
}

.tcf-ebl .ebl-spark-flat i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--ebl-line-strong);
}

.tcf-ebl .ebl-spark-msg {
    position: absolute;
    top: 8px;
    left: 50%;
    padding: 4px 10px;
    background: var(--ebl-soft);
    border: 1px solid var(--ebl-line);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ebl-muted);
    transform: translateX(-50%);
}

.tcf-ebl .ebl-spark {
    position: relative;
    height: 64px;
    margin-top: 6px;
}

.tcf-ebl .ebl-spark svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tcf-ebl .ebl-chart-axis {
    display: flex;
    justify-content: space-between;
    min-height: 17px; /* même hauteur de carte avec ou sans dates */
    margin-top: 4px;
    font-size: 11px;
    color: var(--ebl-faint);
}

.tcf-ebl .ebl-tip {
    position: absolute;
    z-index: 2;
    padding: 6px 8px;
    background: var(--ebl-ink);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -100%);
}

.tcf-ebl .ebl-tip[hidden] {
    display: none;
}

.tcf-ebl .ebl-chart-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-chart-note svg {
    width: 16px;
    height: 16px;
    color: var(--ebl-blue);
}

.tcf-ebl .ebl-goal-key {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    border-top: 1px solid var(--ebl-faint);
}

/* ==========================================================================
   Aides « ? »
   ========================================================================== */
.tcf-ebl .ebl-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0 0 0 8px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--ebl-line-strong);
    border-radius: 50%;
    font-family: var(--ebl-font);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: 0.2em;
    color: var(--ebl-muted);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Zone tactile de 44 px autour du petit rond */
.tcf-ebl .ebl-help::before {
    content: "";
    position: absolute;
    inset: -13px;
}

.tcf-ebl .ebl-help:hover,
.tcf-ebl .ebl-help[aria-expanded="true"] {
    background: var(--ebl-blue);
    border-color: var(--ebl-blue);
    color: #fff;
}

.tcf-ebl .ebl-help:focus-visible {
    outline: 2px solid var(--ebl-blue);
    outline-offset: 2px;
}

.tcf-ebl .ebl-help--light {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.tcf-ebl .ebl-help--light:hover,
.tcf-ebl .ebl-help--light[aria-expanded="true"] {
    background: #fff;
    border-color: #fff;
    color: var(--ebl-blue-700);
}

.tcf-ebl .ebl-help--light:focus-visible {
    outline-color: #fff;
}

/* Bulle d'explication : déplacée sous <body> par le script (jamais rognée), d'où l'absence de .tcf-ebl */
.ebl-help-pop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    box-sizing: border-box;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #E8EBF0;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.04), 0 16px 40px -8px rgba(16, 24, 40, 0.2);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    animation: ebl-help-in 0.15s ease;
}

.ebl-help-pop[hidden] {
    display: none;
}

@keyframes ebl-help-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ebl-help-pop .ebl-help-title {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #0B1220;
}

.ebl-help-pop .ebl-help-text {
    display: block;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
    color: #475467;
}

.ebl-help-pop .ebl-help-text strong {
    font-weight: 600;
    color: #0B1220;
}

/* ==========================================================================
   Fenêtre « abonnement requis »
   ========================================================================== */
.tcf-ebl .ebl-modal {
    width: calc(100% - 32px);
    max-width: 440px;
    max-height: calc(100% - 32px);
    margin: auto;
    padding: 28px 24px 24px;
    overflow: auto;
    background: #fff;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
    font-family: var(--ebl-font);
    text-align: center;
    color: var(--ebl-ink);
}

.tcf-ebl .ebl-modal[open] {
    animation: ebl-modal-in 0.2s ease;
}

.tcf-ebl .ebl-modal::backdrop {
    background: rgba(6, 18, 43, 0.55);
}

@keyframes ebl-modal-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tcf-ebl .ebl-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--ebl-muted);
    cursor: pointer;
}

.tcf-ebl .ebl-modal-close:hover {
    background: var(--ebl-soft);
    color: var(--ebl-ink);
}

.tcf-ebl .ebl-modal-close svg {
    width: 18px;
    height: 18px;
}

.tcf-ebl .ebl-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: var(--ebl-orange-soft);
    color: var(--ebl-orange);
}

.tcf-ebl .ebl-modal-icon svg {
    width: 24px;
    height: 24px;
}

.tcf-ebl .ebl-modal-exam {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ebl-muted);
}

.tcf-ebl .ebl-modal-title {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--ebl-heading);
}

.tcf-ebl .ebl-modal-text {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ebl-text);
}

.tcf-ebl .ebl-modal-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--ebl-soft);
    border-radius: 12px;
    text-align: left;
}

.tcf-ebl .ebl-modal-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ebl-ink);
}

.tcf-ebl .ebl-modal-list svg {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: #16A34A;
}

.tcf-ebl .ebl-modal-actions {
    display: grid;
    gap: 8px;
    margin-top: 20px;
}

.tcf-ebl .ebl-modal-actions [hidden] {
    display: none;
}

/* ==========================================================================
   Tablette
   ========================================================================== */
@media (min-width: 640px) {
    .tcf-ebl .ebl-hero-inner {
        padding: 48px 0 128px;
    }

    .tcf-ebl .ebl-title {
        font-size: 46px;
    }

    .tcf-ebl .ebl-band {
        padding: 64px 0;
    }

    .tcf-ebl .ebl-band.has-lead {
        padding-top: 0;
    }

    .tcf-ebl .ebl-band--flush {
        padding-bottom: 0;
    }

    .tcf-ebl .ebl-band--blue {
        padding: 24px 0;
    }

    .tcf-ebl .ebl-h2 {
        font-size: 36px;
    }

    .tcf-ebl .ebl-lede {
        font-size: 17px;
    }

    .tcf-ebl .ebl-panel {
        padding: 28px;
    }

    .tcf-ebl .ebl-features {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Méthode en cycle : 1 haut gauche, 2 haut droite, 3 bas droite, 4 bas gauche, moyeu au centre */
    .tcf-ebl .ebl-msteps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 56px;
    }

    .tcf-ebl .ebl-msteps .ebl-mstep--1 {
        grid-area: 1 / 1;
    }

    .tcf-ebl .ebl-msteps .ebl-mstep--2 {
        grid-area: 1 / 2;
    }

    .tcf-ebl .ebl-msteps .ebl-mstep--3 {
        grid-area: 2 / 2;
    }

    .tcf-ebl .ebl-msteps .ebl-mstep--4 {
        grid-area: 2 / 1;
    }

    .tcf-ebl .ebl-mstep-arrow,
    .tcf-ebl .ebl-mstep--4 .ebl-mstep-arrow {
        display: flex;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        margin: 0;
    }

    .tcf-ebl .ebl-mstep--1 .ebl-mstep-arrow {
        top: 50%;
        right: -44px;
        margin-top: -16px;
        transform: none;
    }

    .tcf-ebl .ebl-mstep--2 .ebl-mstep-arrow {
        bottom: -44px;
        left: 50%;
        margin-left: -16px;
        transform: rotate(90deg);
    }

    .tcf-ebl .ebl-mstep--3 .ebl-mstep-arrow {
        top: 50%;
        left: -44px;
        margin-top: -16px;
        transform: rotate(180deg);
    }

    .tcf-ebl .ebl-mstep--4 .ebl-mstep-arrow {
        top: -44px;
        left: 50%;
        margin-left: -16px;
        transform: rotate(-90deg);
    }

    /* Orbite en pointillés qui passe dans les allées entre les cartes */
    .tcf-ebl .ebl-cycle::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 0;
        width: 260px;
        height: 260px;
        margin: -130px 0 0 -130px;
        border: 1.5px dashed var(--ebl-blue-200);
        border-radius: 50%;
    }

    .tcf-ebl .ebl-cycle-hub {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 116px;
        height: 116px;
        margin: -58px 0 0 -58px;
        background: #fff;
        border: 1px solid var(--ebl-line);
        border-radius: 50%;
        box-shadow: var(--ebl-shadow-md);
        text-align: center;
    }

    .tcf-ebl .ebl-cycle-hub svg {
        width: 20px;
        height: 20px;
        margin-bottom: 2px;
        color: var(--ebl-blue);
    }

    .tcf-ebl .ebl-cycle-hub b {
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--ebl-heading);
    }

    .tcf-ebl .ebl-cycle-hub em {
        font-size: 12.5px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.1;
        color: var(--ebl-blue);
    }

    .tcf-ebl .ebl-cycle-loop {
        display: none;
    }

    .tcf-ebl .ebl-mock {
        padding: 44px 28px 28px;
    }

    .tcf-ebl .ebl-mock-note {
        max-width: 380px;
        margin: -22px -8px 0 auto;
    }

    .tcf-ebl .ebl-mock-goal {
        top: 26px;
        right: 48px;
    }

    .tcf-ebl .ebl-tl {
        --ebl-tl-pause: 52px;
        padding: 28px;
    }

    .tcf-ebl .ebl-tl-track {
        column-gap: 6px;
    }

    .tcf-ebl .ebl-tl-seg {
        height: 60px;
        font-size: 14px;
    }

    .tcf-ebl .ebl-tl-pause span {
        display: inline;
    }

    .tcf-ebl .ebl-tl-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tcf-ebl .ebl-ex-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tcf-ebl .ebl-xfill--t1 {
        display: flex;
    }

    .tcf-ebl .ebl-ticker-item b {
        font-size: 36px;
    }

    .tcf-ebl .ebl-ticker-item em {
        font-size: 19px;
    }

    .tcf-ebl .ebl-wall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        height: 520px;
    }

    .tcf-ebl .ebl-wall-col--3 {
        display: block;
    }

    .tcf-ebl .ebl-qa summary {
        padding: 18px 22px;
    }

    .tcf-ebl .ebl-qa-q {
        font-size: 16.5px;
    }

    .tcf-ebl .ebl-qa-a {
        padding: 18px 22px 22px;
    }

    /* Sous les questions : carte d'appel et carte de contact côte à côte */
    .tcf-ebl .ebl-faq-aside {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }

    .tcf-ebl .ebl-cta {
        padding: 56px 40px;
    }

    .tcf-ebl .ebl-cta-title {
        font-size: 40px;
    }

    .tcf-ebl .ebl-cta-clock {
        gap: 8px;
    }

    .tcf-ebl .ebl-cta-unit {
        min-width: 100px;
    }

    .tcf-ebl .ebl-cta-unit b {
        font-size: 72px;
    }

    .tcf-ebl .ebl-cta-colon {
        height: 72px;
        font-size: 52px;
    }

    .tcf-ebl .ebl-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tcf-ebl .ebl-charts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tcf-ebl .ebl-modal {
        padding: 32px 32px 28px;
    }

    .tcf-ebl .ebl-modal-actions {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Grand écran
   ========================================================================== */
@media (min-width: 1024px) {
    .tcf-ebl .ebl-hero-inner {
        grid-template-columns: minmax(0, 1fr) 380px;
        align-items: center;
        gap: 64px;
        padding: 72px 0 152px;
    }

    .tcf-ebl .ebl-title {
        font-size: 58px;
        line-height: 1.04;
    }

    .tcf-ebl .ebl-countdown b {
        font-size: 28px;
    }

    .tcf-ebl .ebl-rdv {
        padding: 22px;
    }

    /* Carrés décoratifs et pastille flottante autour du compte à rebours */
    .tcf-ebl .ebl-deco {
        display: block;
        position: absolute;
        border-radius: 14px;
        pointer-events: none;
    }

    .tcf-ebl .ebl-deco--a {
        top: -32px;
        right: -32px;
        width: 96px;
        height: 96px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.18);
    }

    .tcf-ebl .ebl-deco--b {
        bottom: -36px;
        right: 56px;
        width: 44px;
        height: 44px;
        background: var(--ebl-navy);
        opacity: 0.55;
    }

    .tcf-ebl .ebl-float {
        display: flex;
        align-items: center;
        gap: 10px;
        position: absolute;
        bottom: -46px;
        left: -40px;
        z-index: 2;
        padding: 10px 14px 10px 10px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(8, 42, 94, 0.28);
        color: var(--ebl-ink);
        white-space: nowrap;
    }

    .tcf-ebl .ebl-float-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--ebl-blue-50);
        color: var(--ebl-blue);
    }

    .tcf-ebl .ebl-float-icon svg {
        width: 16px;
        height: 16px;
    }

    .tcf-ebl .ebl-float-text b {
        display: block;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
    }

    .tcf-ebl .ebl-float-text small {
        display: block;
        font-size: 11px;
        color: var(--ebl-muted);
    }

    .tcf-ebl .ebl-float-chart {
        display: block;
        width: 64px;
        height: 28px;
    }

    .tcf-ebl .ebl-float-foot {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--ebl-muted);
    }

    .tcf-ebl .ebl-float-foot svg {
        width: 12px;
        height: 12px;
    }

    .tcf-ebl .ebl-float-foot .is-up {
        padding: 1px 6px;
        background: var(--ebl-green-soft);
        border-radius: 6px;
        color: var(--ebl-green-ink);
    }

    .tcf-ebl .is-lead {
        margin-top: -80px;
    }

    .tcf-ebl .ebl-band {
        padding: 80px 0;
    }

    .tcf-ebl .ebl-band.has-lead {
        padding-top: 0;
    }

    .tcf-ebl .ebl-band--flush {
        padding-bottom: 0;
    }

    .tcf-ebl .ebl-band--blue {
        padding: 26px 0;
    }

    .tcf-ebl .ebl-h2 {
        font-size: 44px;
    }

    .tcf-ebl .ebl-lede {
        font-size: 18px;
    }

    .tcf-ebl .ebl-center-head {
        margin-bottom: 44px;
    }

    .tcf-ebl .ebl-sec-title {
        font-size: 32px;
    }

    .tcf-ebl .ebl-features {
        gap: 10px;
        padding: 10px;
    }

    .tcf-ebl .ebl-features .ebl-feature {
        padding: 8px 8px 16px;
    }

    .tcf-ebl .ebl-msteps {
        gap: 64px;
    }

    .tcf-ebl .ebl-msteps .ebl-mstep {
        padding: 26px;
    }

    .tcf-ebl .ebl-mstep--1 .ebl-mstep-arrow {
        right: -48px;
    }

    .tcf-ebl .ebl-mstep--2 .ebl-mstep-arrow {
        bottom: -48px;
    }

    .tcf-ebl .ebl-mstep--3 .ebl-mstep-arrow {
        left: -48px;
    }

    .tcf-ebl .ebl-mstep--4 .ebl-mstep-arrow {
        top: -48px;
    }

    .tcf-ebl .ebl-cycle::before {
        width: 290px;
        height: 290px;
        margin: -145px 0 0 -145px;
    }

    .tcf-ebl .ebl-cycle-hub {
        width: 124px;
        height: 124px;
        margin: -62px 0 0 -62px;
    }

    .tcf-ebl .ebl-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 64px;
    }

    .tcf-ebl .ebl-mock {
        padding: 52px 36px 36px;
    }

    .tcf-ebl .ebl-mock-card {
        padding: 26px 24px 20px;
    }

    .tcf-ebl .ebl-mock-note {
        margin: -24px -20px 0 auto;
    }

    .tcf-ebl .ebl-mock-goal {
        top: 34px;
        right: 60px;
    }

    .tcf-ebl .ebl-tl {
        --ebl-tl-pause: 72px;
        padding: 32px 36px;
    }

    .tcf-ebl .ebl-tl-seg {
        height: 64px;
    }

    .tcf-ebl .ebl-ex-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tcf-ebl .ebl-xfill--t1 {
        display: none;
    }

    .tcf-ebl .ebl-xfill--d1,
    .tcf-ebl .ebl-xfill--d2,
    .tcf-ebl .ebl-xfill--d3 {
        display: flex;
    }

    .tcf-ebl .ebl-xfill--d2 {
        grid-column: span 2;
        padding: 36px 40px;
    }

    .tcf-ebl .ebl-xfill--d3 {
        grid-column: span 3;
        padding: 36px 48px;
    }

    .tcf-ebl .ebl-ticker-item b {
        font-size: 42px;
    }

    .tcf-ebl .ebl-ticker-item em {
        font-size: 20px;
    }

    .tcf-ebl .ebl-ticker-sep svg {
        width: 24px;
        height: 24px;
    }

    .tcf-ebl .ebl-testi {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 64px;
    }

    .tcf-ebl .ebl-wall {
        height: 580px;
    }

    /* Cartes à gauche, questions à droite */
    .tcf-ebl .ebl-faq {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        align-items: start;
        gap: 48px;
    }

    .tcf-ebl .ebl-faq-main {
        grid-column: 2;
        grid-row: 1;
    }

    .tcf-ebl .ebl-faq-aside {
        grid-column: 1;
        grid-row: 1;
        grid-auto-flow: row;
    }

    .tcf-ebl .ebl-cta {
        padding: 72px 64px;
    }

    .tcf-ebl .ebl-cta-title {
        font-size: 48px;
    }

    .tcf-ebl .ebl-cta-clock {
        gap: 10px;
        margin-top: 36px;
    }

    .tcf-ebl .ebl-cta-unit {
        min-width: 140px;
    }

    .tcf-ebl .ebl-cta-unit b {
        font-size: 96px;
    }

    .tcf-ebl .ebl-cta-unit small {
        margin-top: 12px;
        font-size: 12px;
    }

    .tcf-ebl .ebl-cta-colon {
        height: 96px;
        font-size: 68px;
    }
}

/* Méthode : texte à gauche, cycle à droite (en dessous de 1200 px, le texte passe au-dessus) */
@media (min-width: 1200px) {
    .tcf-ebl .ebl-method {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        gap: 56px;
        align-items: center;
    }

    .tcf-ebl .ebl-method-intro .ebl-h2 {
        font-size: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tcf-ebl .ebl-btn,
    .tcf-ebl .ebl-btn svg,
    .tcf-ebl .ebl-filter,
    .tcf-ebl .ebl-xcard,
    .tcf-ebl .ebl-qa,
    .tcf-ebl .ebl-qa summary,
    .tcf-ebl .ebl-qa-icon,
    .tcf-ebl .ebl-qa-icon::before,
    .tcf-ebl .ebl-qa-icon::after,
    .tcf-ebl .ebl-qa::details-content,
    .tcf-ebl .ebl-viz-track i,
    .tcf-ebl.is-js .ebl-mock-bar i,
    .tcf-ebl.is-js .ebl-mock-note,
    .tcf-ebl.is-js .ebl-mock-goal,
    .tcf-ebl.is-js .ebl-tl-seg,
    .tcf-ebl.is-js .ebl-tl-pause {
        transition: none;
    }

    .tcf-ebl .ebl-xcard:hover,
    .tcf-ebl .ebl-btn:hover svg:last-child {
        transform: none;
    }

    /* Mur de témoignages et bande de chiffres immobiles */
    .tcf-ebl .ebl-wall-track,
    .tcf-ebl .ebl-ticker-track {
        animation: none;
    }

    .tcf-ebl .ebl-modal[open],
    .tcf-ebl .ebl-zoom[open],
    .ebl-help-pop {
        animation: none;
    }
}

/* ── Appels à l'action (audit UX du 2026-10-10 : H1, H2) ───────────────── */
.tcf-ebl .ebl-rdv-optin {
    margin-top: 14px;
}

.tcf-ebl .ebl-rdv-optin .mci-cta {
    padding: 14px;
}

.tcf-ebl .ebl-modal-note {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ebl-muted);
    text-align: center;
}

.tcf-ebl .ebl-modal-note a {
    font-weight: 600;
    color: var(--ebl-blue);
    text-decoration: none;
}

.tcf-ebl .ebl-modal-note a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* La carte décorative « Votre progression », accrochée sous le coin du rendez-vous, recouvrirait
   le formulaire de rappel : elle n'est affichée que sans formulaire */
.tcf-ebl .ebl-hero-visual:has(.ebl-rdv-optin) .ebl-float {
    display: none;
}