/* Import de la police Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Styles globaux fixes ---------- */
body {
    font-family: var(--font-family, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif); /* Dynamique */
    background-color: var(--background-color, #f5f5f5); /* Dynamique */
    margin: 0;
    padding: 0;
    color: var(--default-text-color, #333333); /* Dynamique */
}

/* Styles pour les listes */
ul, ol {
    text-align: left;
    padding-left: 20px;
    margin-left: 0;
}

li {
    text-align: left;
    margin-bottom: 8px;
}

header img {
    position: relative;
    top: 0px;
    display: block;
    margin: 0 auto;
    z-index: 999;
    width: 65px;
    height: auto;
    filter: drop-shadow(4px 4px 6px var(--shadow-color, rgba(0, 0, 0, 0.3))); /* Dynamique */
    transition: all 0.3s ease;
}

header h1 {
    text-align: center;
    color: var(--main-color, #6200ea); /* Dynamique */
    margin-bottom: 20px;
}

header {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--main-color, #6200ea); /* Dynamique */
    color: var(--text-color, #ffffff); /* Dynamique */
    padding: 15px 0px 15px 15px;
    box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.1)); /* Dynamique */
    margin: 0;
    opacity: 1; /* Opacité 90% */
}

header button {
    background: none;
    border: none;
    color: var(--text-color, #ffffff); /* Dynamique */
    font-size: 1.9rem;
    margin-right: 15px;
    cursor: pointer;
}

header p {
    width: 100%;
    text-align: center;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
}

/* ---------- Navigation ---------- */
nav {
    display: flex;
    overflow-x: auto;
    background-color: var(--background-color, #ffffff); /* Dynamique */
    box-shadow: 0 1px 2px var(--shadow-color, rgba(0, 0, 0, 0.1)); /* Dynamique */
}

nav + .content-container {
    margin-top: 20px;
}

#content-container {
    margin-top: 15px;
    padding: 10px;
}

nav button {
    flex: 1 0 auto;
    background: none;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    color: var(--main-color, #6200ea); /* Couleur principale du thème pour les icônes */
}

nav button i {
    font-size: 1.35em; /* Taille réduite de 10% (de 1.5em à 1.35em) */
}

nav button.active,
nav button:hover {
    background-color: var(--main-color, #6200ea); /* Dynamique */
    color: var(--text-color, #ffffff); /* Dynamique */
}

/* ---------- Conteneurs généraux ---------- */
.container {
    padding: 15px;
    max-width: 100%;
    margin: 0 auto;
    max-height: calc(100vh - 150px); /* Ajustez cette valeur selon vos besoins */
    overflow-y: auto;
}

.module-container {
    display: none;
}

.module-container.active {
    display: block;
}

.module-container h2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--main-color, #6200ea); /* Dynamique */
    margin-bottom: 15px;
    text-align: center;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ---------- Contenu des modules ---------- */
.resume-content {
    margin: 0 20px;
}

.module-content {
    font-size: 1.1em;
    line-height: 1.6;
    text-align: justify;
}

.resume-container .module-content h2 {
    text-align: left;
}

.resume-container .module-content {
    overflow-y: visible;
    padding-right: 10px;
}

/* ---------- Bouton Spritz ---------- */
.spritz-button {
    font-size: 1em;
    background-color: var(--main-color, #6200ea); /* Dynamique */
    color: var(--text-color, #ffffff); /* Dynamique */
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    transition: background-color 0.3s;
    position: sticky;
    bottom: 20px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* Assurez-vous que le bouton est au-dessus des autres éléments */
}

.spritz-button:hover {
    background-color: var(--secondary-color, #3700b3); /* Dynamique */
}

/* ---------- Overlay Spritz ---------- */
.spritz-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999 !important;
}

/* Mot affiché dans Spritz */
.word-display {
    font-size: 2em;
    font-weight: bold;
    color: var(--main-color, #6200ea); /* Dynamique */
    margin-bottom: 20px;
    text-align: center;
}

.speed-display {
    font-size: 0.7em;
    color: var(--default-text-color, #666); /* Dynamique */
    margin-top: 5px;
    text-align: center;
}

/* Contrôles Spritz */
.spritz-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.spritz-controls button {
    padding: 8px 16px;
    background-color: var(--main-color, #6200ea); /* Dynamique */
    color: var(--text-color, #ffffff); /* Dynamique */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
}

.spritz-controls button:hover {
    background-color: var(--secondary-color, #3700b3); /* Dynamique */
}

.spritz-controls button:disabled {
    background-color: var(--shadow-color, #a0c4e8); /* Dynamique */
    cursor: not-allowed;
}

/* Bouton de fermeture dans Spritz */
.close-button {
    position: absolute;
    top: 100px; /* Nouvelle position pour être sous le header */
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--main-color, #6200ea); /* Dynamique */
    font-size: 1.5em;
    transition: color 0.3s;
    z-index: 1000000;
}

.close-button:hover {
    color: var(--secondary-color, #3700b3); /* Dynamique */
}

/* Same native-bar issue as css/session-overlay.css / css/game-overlay.css:
   the native iOS app draws a fixed 60pt white bar on top of the WKWebView
   (see css/native-app-shell.css, AppDelegate.swift setupGradientView).
   .spritz-overlay is position:fixed/top:0 and its .close-button is
   position:absolute/top:100px relative to it, which on iOS rendered close
   enough to that bar to get partially hidden underneath it. Shift the
   overlay's own box down so the close button's offset is measured from
   below the bar instead. */
body[data-platform="ios"] .spritz-overlay {
    top: 60px;
    height: calc(100% - 60px);
}

/* Highlight du mot lu */
.highlighted-word {
    background-color: #ffff99; /* Couleur de surbrillance douce */
    color: var(--default-text-color, #333); /* Dynamique */
    font-weight: bold;
}

/* Styles pour la bulle d'incitation */
.click-bubble {
    position: absolute;
    left: calc(100% + 20px);
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: var(--main-color);
    padding: 12px 20px;
    border-radius: 20px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--main-color);
    transition: opacity 0.3s ease;
}

.click-bubble::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 12px solid var(--main-color);
}

.click-bubble::after {
    content: '';
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 9px solid white;
}

.click-bubble.show {
    opacity: 1;
    animation: float-horizontal 2s ease-in-out infinite;
}

@keyframes float-horizontal {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(5px); }
}

/* ---------- Responsiveness ---------- */
@media (min-width: 768px) {
    nav button {
        padding: 15px 20px;
        font-size: 1em;
    }

    .container {
        max-width: 750px;
    }

    .flashcards-container {
        max-width: 300px;
    }

    .quiz-container {
        max-width: 600px;
    }

    .quiz-content {
        max-width: 600px;
    }

    .quiz-result {
        max-width: 600px;
    }

    body {
        padding-bottom: 80px;
    }
}

/* Réduire l'espacement vertical entre les sections */
.session-container {
    padding: 15px; /* Réduire le padding général */
    gap: 15px; /* Réduire l'espace entre les éléments */
}

.session-block {
    padding: 15px; /* Réduire le padding interne des blocs */
    margin-bottom: 15px; /* Réduire la marge entre les blocs */
}

/* Si vous avez des titres dans les blocs, réduire leurs marges */
.session-block h2,
.session-block h3 {
    margin: 0 0 10px 0;
}

/* Amazon Affiliate Button Section */
.affiliate-section {
    margin: 30px auto;
    text-align: center;
}

.affiliate-separator {
    width: 50%;
    margin: 0 auto 20px;
    border: none;
    border-top: 1px solid var(--shadow-color, rgba(0, 0, 0, 0.1));
}

.affiliate-invitation {
    color: var(--default-text-color, #333333);
    font-size: 1.1em;
    margin-bottom: 15px;
}

.amazon-affiliate-btn {
    display: none; /* Hidden by default */
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 12px 24px;
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-radius: 20px; /* Match other buttons radius */
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.amazon-affiliate-btn:hover {
    background-color: #333333;
}

.amazon-affiliate-btn i {
    margin-right: 8px;
}