/**
 * -------------------------------------------------------
 * Flashcards Component
 * -------------------------------------------------------
 */

:root {

    /*
    Variables propres au composant
    */

    --fc-card-height: 340px;
    --fc-card-min-height: 280px;
    --fc-radius: 18px;
    --fc-duration: .7s;
    --fc-shadow: 0 10px 30px rgba(0,0,0,.08);

}

@keyframes opacityToFull {
  from {opacity: 0%;}
  to {opacity: 100%;}
}


/* -------------------------------------------------------
 * Composant
 * ------------------------------------------------------- */

.fc {

    width:100%;

    display:flex;

    flex-direction:column;

    gap:2rem;

}


/* -------------------------------------------------------
 * Header
 * ------------------------------------------------------- */

.fc-header {

    display:flex;

    flex-direction:column;

    gap:.5rem;

}

.fc-title {

    margin:0;

    color:var(--color-title);

    font-size:clamp(1.5rem,3vw,2rem);

}

.fc-description {

    margin:0;

    color:var(--color-muted);

}


/* -------------------------------------------------------
 * Progression
 * ------------------------------------------------------- */

.fc-progress {

    display:flex;

    align-items:center;

    gap:1rem;

}

.fc-progress-bar {

    flex:1;

    height:10px;

    overflow:hidden;

    border-radius:999px;

    background:var(--color-border);

}

.fc-progress-value {

    width:0;

    height:100%;

    border-radius:999px;

    background:var(--color-primary);

    transition:width .35s ease;

}

.fc-counter {

    min-width:75px;

    text-align:right;

    color:var(--color-muted);

    font-weight:600;

}


/* -------------------------------------------------------
 * Carte
 * ------------------------------------------------------- */

.fc-stage {

    perspective:1400px;

}

.fc-card {

    width:100%;

    min-height:var(--fc-card-min-height);

    padding:0;

    border:none;

    cursor:pointer;

    background:none;

    perspective:1400px;

}

.fc-card-inner {

    position:relative;

    width:100%;

    min-height:inherit;

    transition:
        transform var(--fc-duration);

    transform-style:preserve-3d;

}

.fc-card.is-flipped .fc-card-inner {

    transform:rotateY(180deg);
    animation: opacityToFull var(--fc-duration);
}

.fc-card:not(.is-flipped) {
     animation: opacityToFull var(--fc-duration);
}

.fc-card .fc-front, .fc-card.is-flipped .fc-back {
  display: flex;
  flex-direction: column;
}

.fc-card img {
    height: 200px;
    width: 100%;
    object-fit: contain;
}

.fc-card.is-flipped .fc-front, .fc-card .fc-back {
  display: none;
}

.fc-face {

    display:flex;

    align-items:center;

    justify-content:center;

    padding:2rem;

    min-height:var(--fc-card-min-height);

    border-radius:var(--fc-radius);

    border:1px solid var(--color-border);

    background:var(--color-surface);

    color:var(--color-text);

    box-shadow:var(--fc-shadow);

    text-align:center;

    line-height:1.7;

    font-size:1.15rem;

    white-space:normal;

    overflow-wrap:anywhere;

}

.fc-front {

    font-weight:600;

}

.fc-back {

    transform:rotateY(180deg);

}


/* -------------------------------------------------------
 * Boutons
 * ------------------------------------------------------- */

.fc-controls {

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

}

.fc-btn {

    flex:1;

    min-width:150px;

    padding:.85rem 1rem;

    border-radius:12px;

    border:none;

    cursor:pointer;

    background:var(--color-primary);

    color:white;

    font-weight:600;

    transition:
        background .2s,
        transform .2s;

}

.fc-btn:hover {

    background:var(--color-primary-hover);

    transform:translateY(-2px);

}

.fc-btn:active {

    transform:none;

}


/* -------------------------------------------------------
 * Erreur
 * ------------------------------------------------------- */

.fc-error {

    padding:2rem;

    border-radius:16px;

    border:1px solid var(--color-border);

    background:var(--color-surface);

}

.fc-error h2 {

    margin-top:0;

    color:#dc2626;

}

.fc-error p {

    margin-bottom:0;

}


/* -------------------------------------------------------
 * Animation
 * ------------------------------------------------------- */

.fc-card:hover .fc-face {

    box-shadow:

        0 14px 36px rgba(0,0,0,.12);

}


/* -------------------------------------------------------
 * Focus clavier
 * ------------------------------------------------------- */

.fc-card:focus-visible {

    outline:none;

}

.fc-card:focus-visible .fc-face {

    border-color:var(--color-primary);

    box-shadow:

        0 0 0 3px rgba(59,130,246,.20);

}

.fc-btn:disabled {

    opacity:.45;

    cursor:not-allowed;

    transform:none;

}

.fc-btn:disabled:hover {

    background:var(--color-primary);

    transform:none;

}

/* -------------------------------------------------------
 * Responsive
 * ------------------------------------------------------- */

@media (max-width:768px){

    :root{

        --fc-card-height:280px;

    }

    .fc-controls{

        flex-direction:column;

    }

    .fc-btn{

        width:100%;

    }

    .fc-face{

        padding:1.5rem;

        font-size:1rem;

    }

}

@media (max-width:480px){

    :root{

        --fc-card-height:240px;

    }

}