/* Session overlay for Flash/Flow sessions */
.session-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    flex-direction: column;
    padding: 2rem;
    overflow-y: auto;
    box-sizing: border-box;
    opacity: 0;
    animation: fadeIn 0.3s ease-out forwards;
}

.session-overlay.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

.session-header {
    text-align: center;
    margin-bottom: 2rem;
    max-width: 600px;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

.session-title {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    padding: 0;
}

.session-description {
    color: white;
    font-size: 1.1rem;
    line-height: 1.5;
    opacity: 0.9;
}

.session-modal {
    background: var(--background-color);
    padding: 15px;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
}

.session-close {
    position: fixed;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 2em;
    cursor: pointer;
    padding: 8px;
    transition: transform 0.2s ease;
    z-index: 10000;
}

.session-close:hover {
    transform: scale(1.1);
}

.session-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0 10px;
}

.session-option {
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s ease;
    background: var(--background-color);
    border: 2px solid var(--main-color);
    color: var(--main-color);
}

.session-option:hover {
    transform: translateY(-5px);
    background: var(--main-color);
    color: white;
}

.session-option i {
    font-size: 1.4em;
    margin-bottom: 6px;
}

.session-option h3 {
    margin: 4px 0;
    font-size: 1.1em;
}

.session-option p {
    font-size: 0.85em;
    opacity: 0.9;
    margin: 4px 0;
    line-height: 1.3;
}

.warning-message {
    font-size: 0.75em;
    margin-top: 8px;
    padding: 6px;
    border-radius: 6px;
    line-height: 1.2;
}

/* Warning message styles */
.warning-message.danger {
    color: #ff4444;
    border: 1px solid #ff4444;
    background: rgba(255, 68, 68, 0.1);
}

.warning-message.safe {
    color: #44c868;
    border: 1px solid #44c868;
    background: rgba(68, 200, 104, 0.1);
}

/* Styles pour la photostimulation */
.flash-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: transparent;
}

.flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: white;
    transition: opacity 0.1s ease;
}

/* Styles spécifiques pour Chrome Desktop uniquement */
.flash.chrome-flash {
    transition: none;
    will-change: opacity, background-color;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Styles pour la vidéo */
.flow-video {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 9997;
    display: none;
    object-fit: cover;
    background: black;
}

/* Warning message */
.warning-message.danger {
    color: #ff4444;
    border: 1px solid #ff4444;
    background: rgba(255, 68, 68, 0.1);
}

.warning-message.safe {
    color: #44c868;
    border: 1px solid #44c868;
    background: rgba(68, 200, 104, 0.1);
}

/* Ajouter ces styles */
.session-counter {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    color: white;
    text-align: center;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    line-height: 1.8;
    z-index: 10000;
    opacity: 1;
    pointer-events: none;
    will-change: transform, opacity;
}

.session-counter.show {
    opacity: 1;
}

/* Style spécifique pour le texte d'introduction */
.session-counter.intro-text {
    font-size: 22px;
    max-width: 80%;
    width: 900px;
    padding: 40px;
    opacity: 1;
    z-index: 10000;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 500;
    min-height: 160px; /* Plus grand pour plus de contenu */
    white-space: pre-wrap;
    overflow: hidden;
    margin: 0 auto;
    line-height: 1.6;
}

/* Style spécifique pour le décompte */
.session-counter.countdown {
    font-size: 120px;
    font-weight: 500;
    opacity: 1;
    z-index: 10000;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    height: 120px; /* Hauteur fixe pour le décompte aussi */
}

/* Animation de fondu */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

header img.session-active {
    animation: pulse 2s infinite;
}

header img.session-paused {
    animation: pulse 2s infinite;
    opacity: 0.5;
}

@keyframes pulse {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
    100% { transform: translateX(-50%) scale(1); }
} 

/* Ajouter les styles pour les contrôles vidéo */
.video-controls {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: none;
    gap: 20px;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px 25px;
    border-radius: 30px;
    backdrop-filter: blur(5px);
}

.video-controls button {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.2s ease;
}

.video-controls button:hover {
    transform: scale(1.1);
}

.video-controls.show {
    display: flex;
} 

/* Ajouter ces styles */
.countdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    z-index: 9996;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: psychedelicGlow 10s infinite linear;
    transition: opacity 5s ease-out;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

.countdown-overlay.fade-out {
    opacity: 0;
}

/* Ajouter ces styles */
@keyframes shake {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    25% { transform: translateX(-50%) rotate(-5deg); }
    75% { transform: translateX(-50%) rotate(5deg); }
}

@keyframes bubble-appear {
    0% { 
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    100% { 
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

header img {
    position: relative;
    transition: all 0.3s ease;
    margin: 0;
    padding: 0;
}

.logo-shake {
    animation: shake-and-flash 1.2s ease-in-out !important;
}

.logo-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.click-bubble {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: var(--main-color);
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: none;
    visibility: visible !important;
}

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

@keyframes bubble-fade-in {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes bubble-fade-out {
    0% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) translateX(10px);
    }
}

.click-bubble.show {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    animation: bubble-fade-in 0.3s ease-out forwards;
}

.click-bubble.hide {
    animation: bubble-fade-out 0.3s ease-out forwards !important;
}

@keyframes shake-and-flash {
    0% { 
        transform: translateX(-50%) rotate(0deg) scale(1);
        filter: brightness(1);
    }
    15% { 
        transform: translateX(-50%) rotate(-12deg) scale(1.15);
        filter: brightness(2.5);
    }
    30% {
        transform: translateX(-50%) rotate(10deg) scale(1.1);
        filter: brightness(1);
    }
    45% { 
        transform: translateX(-50%) rotate(-8deg) scale(1.15);
        filter: brightness(2.5);
    }
    60% {
        transform: translateX(-50%) rotate(6deg) scale(1.1);
        filter: brightness(1);
    }
    75% {
        transform: translateX(-50%) rotate(-4deg) scale(1.05);
        filter: brightness(2.5);
    }
    90% {
        transform: translateX(-50%) rotate(2deg) scale(1.02);
        filter: brightness(1);
    }
    100% {
        transform: translateX(-50%) rotate(0deg) scale(1);
        filter: brightness(1);
    }
}

header {
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header > div {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ajuster l'espacement pour la Flash Session */
.flash-option {
    display: flex;
    flex-direction: column;
}

.flash-option .warning-message {
    margin-top: auto;
    font-size: 0.75em;
    padding: 6px;
}

/* Ajouter les styles pour le bouton stop de la Flash Session */
.flash-controls {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: none;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px 25px;
    border-radius: 30px;
    backdrop-filter: blur(5px);
}

.flash-controls button {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.2s ease;
}

.flash-controls button:hover {
    transform: scale(1.1);
}

.flash-controls.show {
    display: flex;
}

/* Desktop styles */
@media (min-width: 768px) {
    .session-modal {
        padding: 30px;
    }

    .session-close {
        top: 25px;
        right: 25px;
        font-size: 2em;
        padding: 10px;
    }

    .session-title {
        font-size: 1.8em;
        margin: 15px 0 30px 0;
    }

    .session-options {
        flex-direction: row;
        gap: 20px;
        padding: 0;
    }

    .session-option {
        flex: 1;
        padding: 20px;
        min-height: 200px;
    }

    .session-option i {
        font-size: 2em;
        margin-bottom: 15px;
    }

    .session-option h3 {
        font-size: 1.4em;
        margin: 10px 0;
    }

    .session-option p {
        font-size: 0.9em;
        margin: 10px 0;
        line-height: 1.4;
    }

    .warning-message {
        font-size: 0.8em;
        margin-top: 12px;
        padding: 8px;
    }
}

/* Prevent scroll on body when overlay is open */
body.overlay-open {
    overflow: hidden;
}

/* Ajouter ces styles */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap'); 

/* Style pour le bouton skip */
.skip-intro {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    padding: 15px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.5em;
    z-index: 10001;
    transition: transform 0.2s ease;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skip-intro:hover {
    transform: translateX(-50%) scale(1.1);
}

.skip-intro i {
    color: white;
}

/* Ajouter ces styles pour l'effet psychédélique */
@keyframes psychedelicGlow {
    0% {
        box-shadow: inset 0 0 150px rgba(255, 0, 0, 0.3),
                    inset 0 0 100px rgba(0, 255, 0, 0.2),
                    inset 0 0 50px rgba(0, 0, 255, 0.1);
    }
    33% {
        box-shadow: inset 0 0 150px rgba(0, 255, 0, 0.3),
                    inset 0 0 100px rgba(0, 0, 255, 0.2),
                    inset 0 0 50px rgba(255, 0, 0, 0.1);
    }
    66% {
        box-shadow: inset 0 0 150px rgba(0, 0, 255, 0.3),
                    inset 0 0 100px rgba(255, 0, 0, 0.2),
                    inset 0 0 50px rgba(0, 255, 0, 0.1);
    }
    100% {
        box-shadow: inset 0 0 150px rgba(255, 0, 0, 0.3),
                    inset 0 0 100px rgba(0, 255, 0, 0.2),
                    inset 0 0 50px rgba(0, 0, 255, 0.1);
    }
}

@keyframes particleFloat {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translate(
            calc(var(--random-x) * 100vw),
            calc(var(--random-y) * 100vh)
        ) scale(1);
    }
    80% {
        opacity: 1;
        transform: translate(
            calc(var(--random-x2) * 100vw),
            calc(var(--random-y2) * 100vh)
        ) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(
            calc(var(--random-x3) * 100vw),
            calc(var(--random-y3) * 100vh)
        ) scale(0);
    }
}

/* Styles pour mobile */
@media (max-width: 768px) {
    .session-overlay {
        padding: 1rem;
        justify-content: flex-start;
        padding-top: 3rem;
    }

    .session-header {
        margin-bottom: 1rem;
    }

    .session-title {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }

    .session-description {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .session-modal {
        padding: 12px;
    }

    .session-options {
        gap: 8px;
    }

    .session-option {
        padding: 10px;
        min-height: auto;
    }

    .session-option i {
        font-size: 1.2em;
        margin-bottom: 4px;
    }

    .session-option h3 {
        font-size: 1em;
        margin: 2px 0;
    }

    .session-option p {
        font-size: 0.8em;
        margin: 2px 0;
        line-height: 1.2;
    }

    .warning-message {
        font-size: 0.7em;
        margin-top: 6px;
        padding: 4px;
    }

    .session-close {
        top: 10px;
        right: 10px;
        font-size: 1.5em;
    }
}

/* Pour les très petits écrans */
@media (max-height: 600px) {
    .session-overlay {
        padding-top: 2rem;
    }

    .session-header {
        margin-bottom: 0.5rem;
    }

    .session-title {
        font-size: 1.5rem;
    }

    .session-description {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .session-option {
        padding: 8px;
    }

    .session-option i {
        font-size: 1em;
    }

    .session-option h3 {
        font-size: 0.9em;
    }

    .session-option p {
        font-size: 0.75em;
        line-height: 1.1;
    }
}

/* .session-overlay is position:fixed / top:0 covering the full screen and
   vertically-centers its content — on iOS the native app draws a fixed 60pt
   white bar on top of the WKWebView (see css/native-app-shell.css,
   AppDelegate.swift setupGradientView), so any content taller than the space
   below that bar had its top (e.g. the "Focus Session" title) render hidden
   underneath it. Shrinking the overlay's own box to start below the bar
   keeps the centering math confined to the actually-visible area. */
body[data-platform="ios"] .session-overlay {
    top: 60px;
    height: calc(100% - 60px);
}