/* ══════════════════════════════════════════════════════════
   EPS Multi-Tools — Thème (palette logo)
   Teal    : #0f9e8e   Orange  : #e84020
   Or      : #f5b800   Marine  : #1a2b3a
   ══════════════════════════════════════════════════════════ */

/* ── Variables de thème ──────────────────────────────────── */
:root {
    --eps-teal:          #0f9e8e;
    --eps-teal-dark:     #0c8a7c;
    --eps-teal-darker:   #0a7468;
    --eps-teal-light:    #e6f7f5;
    --eps-orange:        #e84020;
    --eps-gold:          #f5b800;
    --eps-navy:          #1a2b3a;

    /* Override Bootstrap primary */
    --bs-primary:            #0f9e8e;
    --bs-primary-rgb:        15, 158, 142;
    --bs-link-color:         #0c8a7c;
    --bs-link-color-rgb:     12, 138, 124;
    --bs-link-hover-color:   #0a7468;
    --bs-focus-ring-color:   rgba(15, 158, 142, .25);

    /* ── Shadows ─────────────────────────────────────────── */
    --shadow-xs:   0 1px 2px rgba(0,0,0,.05);
    --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --shadow-md:   0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
    --shadow-lg:   0 10px 20px rgba(0,0,0,.09), 0 4px 8px rgba(0,0,0,.05);
    --shadow-xl:   0 20px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);
    --shadow-teal: 0 8px 24px rgba(15,158,142,.22);
    --shadow-gold: 0 8px 24px rgba(245,184,0,.28);

    /* ── Transitions ──────────────────────────────────────── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast:  150ms;
    --t-base:  260ms;
    --t-slow:  420ms;

    /* ── Radius ───────────────────────────────────────────── */
    --radius-sm:  .375rem;
    --radius-md:  .75rem;
    --radius-lg:  1rem;
    --radius-xl:  1.5rem;
    --radius-full: 9999px;
}

/* ── Base ────────────────────────────────────────────────── */
body {
    background-color: #f2f7f6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    animation: fadeIn var(--t-base) var(--ease-out);
}

/* ── Table rows ──────────────────────────────────────────── */
.table-hover > tbody > tr {
    transition: background-color var(--t-fast);
}

/* ── Tool nav buttons (classe/show) ─────────────────────── */
.tool-btn {
    transition: transform     var(--t-fast) var(--ease-out),
                box-shadow    var(--t-fast) var(--ease-out),
                background-color var(--t-fast),
                border-color     var(--t-fast);
}

.tool-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ── Bootstrap primary overrides ────────────────────────── */
.btn-primary {
    --bs-btn-bg:               #0f9e8e;
    --bs-btn-border-color:     #0f9e8e;
    --bs-btn-hover-bg:         #0c8a7c;
    --bs-btn-hover-border-color: #0c8a7c;
    --bs-btn-active-bg:        #0a7468;
    --bs-btn-active-border-color: #0a7468;
    --bs-btn-disabled-bg:      #0f9e8e;
    --bs-btn-disabled-border-color: #0f9e8e;
}

.btn-outline-primary {
    --bs-btn-color:            #0f9e8e;
    --bs-btn-border-color:     #0f9e8e;
    --bs-btn-hover-bg:         #0f9e8e;
    --bs-btn-hover-border-color: #0f9e8e;
    --bs-btn-active-bg:        #0c8a7c;
    --bs-btn-active-border-color: #0c8a7c;
}

.text-primary   { color: #0f9e8e !important; }
.bg-primary     { background-color: #0f9e8e !important; }
.border-primary { border-color: #0f9e8e !important; }

.badge.bg-primary { background-color: #0f9e8e !important; }

/* form focus ring */
.form-control:focus,
.form-select:focus {
    border-color: #0f9e8e;
    box-shadow: 0 0 0 .25rem rgba(15, 158, 142, .25);
}

/* ── Navbar ──────────────────────────────────────────────── */
.navbar-eps {
    background: linear-gradient(135deg, #1a2b3a 0%, #0f6b60 60%, #0f9e8e 100%);
    transition: padding var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
}

.navbar-eps.navbar-scrolled {
    padding-top:    .25rem;
    padding-bottom: .25rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
}

/* ── Footer ──────────────────────────────────────────────── */
footer {
    border-top: 3px solid var(--eps-teal) !important;
}

/* ── Cards (global) ──────────────────────────────────────── */
.card {
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}

/* ── Tool cards ──────────────────────────────────────────── */
.tool-card {
    position: relative;
}
.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-teal) !important;
    z-index: 10;
}
.tool-card:has(.dropdown.show) {
    z-index: 10;
}

/* ── Preview cards (grille outils dashboard) ─────────────── */
.preview-card {
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.preview-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ── Score display ───────────────────────────────────────── */
.score-display {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ── Timer ───────────────────────────────────────────────── */
.timer-display,
.font-monospace {
    font-family: 'Courier New', Courier, monospace;
}

/* ── Elève chip ──────────────────────────────────────────── */
.eleve-chip {
    border: 1px solid transparent;
    transition: background-color 0.1s, border-color 0.1s;
}
.eleve-chip:hover {
    background-color: #d4f0ec !important;
    border-color: #0f9e8e;
}

/* ── Bracket match cell ──────────────────────────────────── */
.bracket-match {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    min-width: 160px;
    border-radius: .375rem;
}

/* ── Form errors ─────────────────────────────────────────── */
.form-error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ── Score card overflow ─────────────────────────────────── */
.score-card-wrapper {
    overflow-x: auto;
}

/* ── App dialog (<dialog> natif) ─────────────────────────── */
dialog.app-dialog {
    padding: 0;
    border: none;
    border-radius: .75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    max-width: 90vw;
}

dialog.app-dialog::backdrop {
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(3px);
}

.app-dialog-inner {
    padding: 1.5rem;
    min-width: 280px;
    max-width: 440px;
    font-family: inherit;
}

.app-dialog-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: 1rem;
}

.app-dialog-header i { font-size: 1.25rem; }

#dlg-msg {
    color: #6c757d;
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.app-dialog-footer {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* ── Toast (notification non-bloquante) ──────────────────── */
.app-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    font-size: .875rem;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}
.app-toast--success { background: #1a2b3a; color: #fff; }
.app-toast--error   { background: #dc3545; color: #fff; }
.app-toast--info    { background: #0d6efd; color: #fff; }
.app-toast--visible { opacity: 1; transform: translateY(0); }

/* ── Misc utilities ──────────────────────────────────────── */
.opacity-90 { opacity: 0.9; }

.navbar .nav-link:hover { opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════
   Phase 1 — Animation foundations
   ══════════════════════════════════════════════════════════════ */

/* ── Typographie ─────────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
}

/* ── Dégradé de texte ────────────────────────────────────────── */
.text-gradient {
    background: linear-gradient(135deg, var(--eps-teal) 0%, var(--eps-teal-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes slideRight {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes rippleAnim {
    to { transform: scale(4); opacity: 0; }
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(15,158,142,.35); }
    50%       { box-shadow: 0 0 0 8px rgba(15,158,142,0); }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* ── Scroll-reveal ───────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease-out),
                transform var(--t-slow) var(--ease-out);
    will-change: opacity, transform;
}

.reveal.fade-up    { transform: translateY(24px); }
.reveal.fade-in    { transform: none; }
.reveal.scale-in   { transform: scale(0.93); }
.reveal.slide-right { transform: translateX(-20px); }

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ── Stagger enfants ─────────────────────────────────────────── */
.stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-out);
}

.stagger.is-visible > *:nth-child(1)  { transition-delay:   0ms; }
.stagger.is-visible > *:nth-child(2)  { transition-delay:  60ms; }
.stagger.is-visible > *:nth-child(3)  { transition-delay: 120ms; }
.stagger.is-visible > *:nth-child(4)  { transition-delay: 180ms; }
.stagger.is-visible > *:nth-child(5)  { transition-delay: 240ms; }
.stagger.is-visible > *:nth-child(6)  { transition-delay: 300ms; }
.stagger.is-visible > *:nth-child(7)  { transition-delay: 360ms; }
.stagger.is-visible > *:nth-child(8)  { transition-delay: 420ms; }

.stagger.is-visible > * {
    opacity: 1;
    transform: none;
}

/* ── Hover lift ──────────────────────────────────────────────── */
.hover-lift {
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
    will-change: transform;
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* ── Hover glow (teal) ───────────────────────────────────────── */
.hover-glow {
    transition: box-shadow var(--t-base) var(--ease-out);
}

.hover-glow:hover {
    box-shadow: var(--shadow-teal);
}

/* ── Ripple sur boutons ──────────────────────────────────────── */
.btn {
    position: relative;
    overflow: hidden;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                background-color var(--t-fast),
                border-color var(--t-fast);
}

.btn:active:not(:disabled) {
    transform: scale(0.96);
}

.ripple {
    position: absolute;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    background: rgba(255,255,255,.35);
    transform: scale(0);
    animation: rippleAnim 500ms linear;
    pointer-events: none;
}

/* ── Compteurs animés ────────────────────────────────────────── */
[data-counter] {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ── Animations directes (au-dessus de la ligne de flottaison) ── */
.animate-fade-up {
    animation: fadeUp var(--t-slow) var(--ease-out) both;
}

.animate-fade-in {
    animation: fadeIn var(--t-slow) var(--ease-out) both;
}

.animate-scale-in {
    animation: scaleIn var(--t-slow) var(--ease-spring) both;
}

.delay-1 { animation-delay:  80ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 340ms; }
.delay-4 { animation-delay: 480ms; }
.delay-5 { animation-delay: 620ms; }

/* ── Hover glow gold (carte premium) ────────────────────────── */
.hover-glow-gold {
    transition: box-shadow var(--t-base) var(--ease-out),
                transform  var(--t-base) var(--ease-out);
}

.hover-glow-gold:hover {
    box-shadow: var(--shadow-gold);
    transform: translateY(-4px);
}

/* ── Accordion ───────────────────────────────────────────────── */
.accordion-item {
    transition: background-color var(--t-fast);
}

.accordion-button {
    transition: background-color var(--t-fast), box-shadow var(--t-fast);
}

.accordion-button:not(.collapsed) {
    box-shadow: inset 0 -1px 0 rgba(15,158,142,.15);
}

/* ── KPI cards ───────────────────────────────────────────────── */
.kpi-card {
    border-top: 3px solid transparent;
    transition: border-color var(--t-base) var(--ease-out),
                transform     var(--t-fast) var(--ease-out),
                box-shadow    var(--t-fast) var(--ease-out);
}

.kpi-card:hover {
    border-top-color: var(--eps-teal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ── Timeline ────────────────────────────────────────────────── */
.timeline-row {
    transition: background-color var(--t-fast);
}

.timeline-row:hover {
    background-color: var(--eps-teal-light) !important;
}

/* ── Floating orbs (hero) ────────────────────────────────────── */
@keyframes floatOrb {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-18px) scale(1.04); }
}

.hero-orb {
    animation: floatOrb 7s ease-in-out infinite;
    will-change: transform;
}

.hero-orb:nth-child(2) {
    animation-duration: 9s;
    animation-delay: -3s;
}