/**
 * JE TRAVEL LEARNING SYSTEM — SHARED DESIGN TOKENS
 * Single source of truth for the Brand Book v5.0 palette, typography and spacing scale.
 * Registered as the `jtls-design-tokens` stylesheet handle and declared as a dependency by
 * every frontend module (dashboard, progression, planning, notifications, AI mentor,
 * assistance, journey, documents, onboarding, content) so they all read from the same values.
 *
 * Two variable prefixes are exposed on purpose: `--jtls-*` and `--jt-*`. Different modules were
 * written against one or the other; rather than rename every module stylesheet (risking visual
 * regressions), both aliases resolve to the exact same Brand Book value here.
 */

:root {
    /* Brand Book §07 — Couleur principale */
    --jtls-primary: var(--jt-brand-blue-dark, #1276A8); /* 1.63 : bleu des actions et des liens (5:1 sur blanc) ; le bleu clair de la marque devient --jtls-primary-bright */
    --jtls-primary-bright: var(--jt-brand-blue, #1CA3DD);
    --jtls-primary-dark: #0E5F87;
    --jtls-primary-light: var(--jt-brand-blue-pale, #E3F6FD);

    /* Brand Book §07 — Couleur secondaire */
    --jtls-accent: var(--jt-brand-yellow, #F8B400);
    --jtls-accent-light: var(--jt-brand-yellow-pale, #FEF6DC);

    /* Brand Book §07 — Couleur d'action */
    --jtls-danger: #B3202C; /* 1.63 : rouge foncé, lisible en texte */
    --jtls-danger-light: var(--jt-brand-red-pale, #FEF0F1);

    /* Success (not in Brand Book v5's core table, kept for status badges) */
    --jtls-success: #147A74; /* 1.63 : vert foncé, lisible en texte */
    --jtls-success-light: #E8F7F5;

    /* Brand Book §07 — Couleur premium */
    --jtls-navy: var(--jt-brand-navy, #0B2545);

    /* Brand Book §07 — Couleurs neutres */
    --jtls-bg-gray: var(--jt-brand-gray-light, #F5F7FA);
    --jtls-text: #243B53;
    --jtls-text-muted: #5B6776;
    --jtls-white: var(--jt-brand-white, #FFFFFF);
    --jtls-border: #E3E8EF;

    /* Brand Book §09 — Typographie */
    --jtls-font-heading: var(--jt-brand-font-title, 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --jtls-font-body: var(--jt-brand-font-body, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);

    /* Shared shape & elevation scale */
    --jtls-radius-sm: 8px;
    --jtls-radius-md: 12px;
    --jtls-radius-lg: 12px; /* 1.63 : deux rayons seulement (8 et 12) */
    --jtls-radius-full: 9999px;
    --jtls-shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.04); /* 1.63 : surfaces à plat, filet de 1 px ; l'ombre ne sert plus qu'aux fenêtres */
    --jtls-shadow-md: 0 1px 2px rgba(11, 37, 69, 0.06);
    --jtls-shadow-lg: 0 12px 32px rgba(11, 37, 69, 0.12);

    /* --jt-* aliases: used by progression.css, planning.css and a few other module files */
    --jt-primary: var(--jtls-primary);
    --jt-primary-dark: var(--jtls-primary-dark);
    --jt-primary-light: var(--jtls-primary-light);
    --jt-navy: var(--jtls-navy);
    --jt-accent: var(--jtls-accent);
    --jt-accent-light: var(--jtls-accent-light);
    --jt-action: var(--jtls-danger);
    --jt-action-light: var(--jtls-danger-light);
    --jt-success: var(--jtls-success);
    --jt-success-light: var(--jtls-success-light);
    --jt-text-dark: var(--jtls-text);
    --jt-text-muted: var(--jtls-text-muted);
    --jt-bg-light: var(--jtls-bg-gray);
    --jt-white: var(--jtls-white);
    --jt-font-heading: var(--jtls-font-heading);
    --jt-font-body: var(--jtls-font-body);
    --jt-radius-sm: var(--jtls-radius-sm);
    --jt-radius-md: var(--jtls-radius-md);
    --jt-radius-lg: var(--jtls-radius-lg);
    --jt-radius-full: var(--jtls-radius-full);
    --jt-shadow-sm: var(--jtls-shadow-sm);
    --jt-shadow-md: var(--jtls-shadow-md);
}

/* ==========================================================================================================
   1.63.0 (lot 1 du design) : composants communs, préfixe .ui-
   Rôles de couleur : encre (titres), texte, secondaire, bleu (actions), jaune (achat seulement), vert/ambre/rouge (statuts).
   ========================================================================================================== */
:root {
    --ui-ink: #0B2545;
    --ui-text: #243B53;
    --ui-muted: #5B6776;
    --ui-line: #E3E8EF;
    --ui-line-soft: #EEF2F6;
    --ui-bg: #F5F7FA;
    --ui-brand: #1276A8;
    --ui-brand-dark: #0E5F87;
    --ui-brand-soft: #E8F3F9;
    --ui-accent: #F8B400;
    --ui-accent-dark: #E0A200;
    --ui-ok: #147A74;
    --ui-warn: #8A5A00;
    --ui-warn-soft: #FFF6E0;
    --ui-err: #B3202C;
    --ui-err-soft: #FDECEE;
}
/* 1.63.0 (lot 4) : les feuilles de style des modules redéclarent encore ces jetons dans leur propre :root (ancien bleu clair, ancien rouge
   vif) ; `html:root` est plus spécifique et garde les valeurs du design quel que soit l'ordre de chargement des feuilles. */
html:root {
    --jtls-primary: var(--jt-brand-blue-dark, #1276A8);
    --jtls-primary-dark: #0E5F87;
    --jt-primary: var(--jt-brand-blue-dark, #1276A8);
    --jt-primary-dark: #0E5F87;
    --jtls-danger: #B3202C;
    --jtls-accent-red: #B3202C;
    --jt-action: #B3202C;
    --jtls-success: #147A74;
    --jt-success: #147A74;
}
.jtls-ico { width: 20px; height: 20px; flex: none; vertical-align: -0.2em; }
.jtls-ico--sm { width: 16px; height: 16px; }

/* Surfaces : un seul niveau, filet de 1 px, aucune ombre */
.ui-card { background: #fff; border: 1px solid var(--ui-line); border-radius: var(--jtls-radius-md, 12px); }
.ui-card--pad { padding: 20px; }
.ui-card--focus { border-color: var(--ui-brand); box-shadow: inset 4px 0 0 var(--ui-brand); }

/* Surtitre et titre de section : plus de pastille sombre à emoji */
.ui-over { font: 600 12px/1.3 var(--jtls-font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-muted); margin: 0; }
.ui-title { font: 600 18px/1.3 var(--jtls-font-heading); color: var(--ui-ink); margin: 0; }
.ui-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }

/* Boutons : principal (bleu), secondaire (contour), achat (jaune, jamais ailleurs) */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--jtls-radius-sm, 8px); background: var(--ui-brand); color: #fff !important; font: 600 15px/1.2 var(--jtls-font-body); text-decoration: none !important; cursor: pointer; }
.ui-btn:hover, .ui-btn:focus-visible { background: var(--ui-brand-dark); color: #fff !important; }
.ui-btn--sec { background: #fff; color: var(--ui-ink) !important; border-color: #C5CFDB; }
.ui-btn--sec:hover, .ui-btn--sec:focus-visible { background: var(--ui-bg); color: var(--ui-ink) !important; }
.ui-btn--buy { background: var(--ui-accent); color: var(--ui-ink) !important; }
.ui-btn--buy:hover, .ui-btn--buy:focus-visible { background: var(--ui-accent-dark); color: var(--ui-ink) !important; }
.ui-btn--sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Étiquettes de statut : un mot et un point, jamais un bloc de couleur */
.ui-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ui-muted); white-space: nowrap; }
.ui-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ui-tag--ok { color: var(--ui-ok); } .ui-tag--warn { color: var(--ui-warn); } .ui-tag--err { color: var(--ui-err); } .ui-tag--info { color: var(--ui-brand); }

/* Encadrés : une icône, un titre, une phrase, une action */
.ui-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: var(--jtls-radius-md, 12px); background: #fff; color: var(--ui-text); }
.ui-note--info { background: var(--ui-brand-soft); border-color: #CFE5F1; }
.ui-note--warn { background: var(--ui-warn-soft); border-color: #F1DFB0; }
.ui-note--err { background: var(--ui-err-soft); border-color: #F3C9CD; }
.ui-note strong { color: var(--ui-ink); }
.ui-note p { margin: 2px 0 0; }

/* Listes à lignes (à la place de cartes empilées) */
.ui-list { list-style: none; margin: 0; padding: 0; }
.ui-list > li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 20px; border-top: 1px solid var(--ui-line-soft); }
.ui-list > li:first-child { border-top: 0; }

/* Avancement */
.ui-bar { height: 6px; border-radius: 3px; background: var(--ui-line); overflow: hidden; }
.ui-bar > i { display: block; height: 100%; background: var(--ui-brand); border-radius: 3px; }

@keyframes jtlsPulseHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(28, 163, 221, 0.7);
        transform: scale(1);
    }
    30% {
        box-shadow: 0 0 0 12px rgba(28, 163, 221, 0);
        transform: scale(1.015);
    }
    60% {
        box-shadow: 0 0 0 16px rgba(28, 163, 221, 0);
        transform: scale(1.01);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(28, 163, 221, 0);
        transform: scale(1);
    }
}

.jtls-highlight-pulse {
    animation: jtlsPulseHighlight 2.4s cubic-bezier(0.4, 0, 0.2, 1) 2 !important;
    border-color: var(--jtls-primary) !important;
    position: relative;
    z-index: 10;
}

/* 1.63.0 (recette, 2e passe) : « Débloquer … » mène aux offres : c'est un achat, donc le seul bouton jaune (comme « Débloquer mon planning » dans le bandeau d'aperçu).
   Les boutons verrouillés en contour (« Ajouter le document ») restent des boutons secondaires. */
a.jtls-btn.jtls-btn-primary.jtls-btn-locked { border-color: var(--ui-accent) !important; background: var(--ui-accent) !important; color: var(--ui-ink) !important; box-shadow: none !important; }
a.jtls-btn.jtls-btn-primary.jtls-btn-locked:hover, a.jtls-btn.jtls-btn-primary.jtls-btn-locked:focus-visible { border-color: var(--ui-accent-dark) !important; background: var(--ui-accent-dark) !important; color: var(--ui-ink) !important; }

/* 1.63.0 (recette, lot 8) : le bouton « Débloquer pour valider » d'une mission est aussi un achat : jaune comme les autres « Débloquer… ». */
a.jtls-btn-validate-mission.jtls-btn-locked { border-color: var(--ui-accent) !important; background-color: var(--ui-accent) !important; color: var(--ui-ink) !important; box-shadow: none !important; }
a.jtls-btn-validate-mission.jtls-btn-locked:hover, a.jtls-btn-validate-mission.jtls-btn-locked:focus-visible { border-color: var(--ui-accent-dark) !important; background-color: var(--ui-accent-dark) !important; color: var(--ui-ink) !important; }