/* FICHIER DÉPLACÉ : styles pour "prochain cours"
     Origine : themes/the7-child/formulaire-yoga/style-formulaire-yoga.css
     Scopé sous #yp-prochain-cours-dynamic
     Date: 2026-02-28
*/

/* [2026-03-02] White-label variables — prochain_cours */
:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) {
    --yp-next-primary: #b4734a;
    --yp-next-accent: #c28a54;
    --yp-next-bg-card: #ffffff;
    --yp-next-text-main: #222222;
    --yp-next-text-muted: #777777;

    --yp-next-font-title: "bogart", serif;
    --yp-next-font-body: "Quicksand", sans-serif;

    --yp-next-radius-sm: 5px;
    --yp-next-radius-lg: 18px;

    --yp-next-shadow: -6px 6px 5px -2px rgba(0, 0, 0, 0.21);
    height: 550px;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours {
        border-radius: var(--yp-next-radius-lg);       /* ajuste la valeur */
        overflow: hidden;          /* OBLIGATOIRE */
        box-shadow: var(--yp-next-shadow);
        height: 552px;
        display: flex;
        flex-direction: column;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours {
    position: relative;
    width: 100%;
    overflow: hidden;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-photo {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-overlay {
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;

    text-align: center;
    color: #fff;

    font-family: var(--yp-next-font-title);
    font-size: 34px;
    line-height: 1.2;
    font-family: "bogart", serif;
    font-weight: 900;
    text-shadow: -1px 2px 0px rgba(0, 0, 0, 0.34);
    pointer-events: none;
        font-family: "shantell-sans-bouncy", sans-serif;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    background: var(--yp-next-discipline-bg, #b4734a);
    color: #fff;
    text-align: center;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-hint__text {
    font-family: 'lulo-one', sans-serif; 
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-hint__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transform: translateY(-5px);
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--yp-next-discipline-bg-light, var(--yp-next-accent));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transform: translateY(0px);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 3;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 14px 16px;
    box-sizing: border-box;
    background: var(--yp-next-discipline-bg, #b4734a);
    transform: translateY(100%);
    pointer-events: none;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-actions .yp-btn-decouvrir,
:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-actions .yp-btn-essai {
    font-family: var(--yp-next-font-body);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center !important;
    min-height: 78px;
    padding: 12px 10px;
    border-radius: 14px;
    text-decoration: none;
    box-sizing: border-box;
    color: #fff;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-actions .yp-btn-decouvrir {
    background: transparent;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-actions .yp-btn-essai {
    background: transparent;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-actions .yp-btn-main {
    font-size: 18px;
    font-weight: 800;
    line-height: 0.85;
    text-transform: none;
    letter-spacing: 0.02em;
    margin: 0;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-actions .yp-btn-sub {
    font-size: 13px;
    line-height: 1.2;
    text-transform: none;
    margin: 0;
    display: block;
    width: 100%;
    text-align: center;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-actions .yp-btn-line1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 20px;
    margin-bottom: 6px;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-actions .yp-btn-line1 .yp-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-actions .yp-btn-icon img {
    width: 16px;
    height: auto;
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    :is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours:hover .yp-prochain-cours-footer {
        transform: translateY(-108px);
    }

    :is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours:hover .yp-prochain-cours-actions {
        transform: translateY(0);
        pointer-events: auto;
    }
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-footer > .yp-pc-jour,
:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-footer > .yp-pc-heures,
:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-footer > .yp-pc-prof {
    align-self: center;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-footer {
    align-items: stretch;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-jour {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: "bogart", serif;
    font-weight: 900;
    font-size: 23px;
    color: #ffffff;
    flex: 1;
    text-align: right;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-jour-label {
    display: block;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-date {
    display: block;
    font-family: var(--yp-next-font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-heures {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    background: var(--yp-next-discipline-bg, var(--yp-next-primary));
    border-radius: var(--yp-next-radius-sm);
    padding: 6px 14px;
    color: #ffffff;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-heure-debut {
    font-family: var(--yp-next-font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.1;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-heure-fin {
    font-family: var(--yp-next-font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.1;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-prof {
    font-family: "bogart", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 23px;
    color: #ffffff;
    text-align: left;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-jour { flex: 1; }
:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-heures { flex: 0 0 auto; }
:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-prof { flex: 1; }

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-lieu {
    background: var(--yp-next-discipline-bg, var(--yp-next-primary));
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-lieu-nom {
    font-family: var(--yp-next-font-body);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    display: inline;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-lieu-adresse {
    font-family: var(--yp-next-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    display: inline;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-lieu-adresse::before {
    content: " ";
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-pc-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

@media (max-width: 768px) {
    #yp-prochain-cours-dynamic-mobile .yp-pc-date {
        display: block;
        width: auto;
        white-space: nowrap;
        word-break: normal;
        text-align: right;
        font-family: var(--yp-next-font-body);
        font-weight: 700;
    }

    #yp-prochain-cours-dynamic-mobile {
        height: 400px;
    }

    #yp-prochain-cours-dynamic-mobile .yp-prochain-cours {
        height: 400px;
    }

    #yp-prochain-cours-dynamic-mobile .yp-prochain-cours-photo {
        overflow: hidden;
    }

    #yp-prochain-cours-dynamic-mobile .yp-prochain-cours img {
        object-position: center top;
    }

    :is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours-footer {
        transform: translateY(0px);
    }

    #yp-prochain-cours-dynamic-mobile .yp-prochain-cours:not(.is-open) .yp-prochain-cours-footer {
        animation: none;
    }

    :is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours.is-open .yp-prochain-cours-footer {
        transform: translateY(-108px);
        animation: none;
    }

    :is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .yp-prochain-cours.is-open .yp-prochain-cours-actions {
        transform: translateY(0);
        pointer-events: auto;
        animation: none;
    }
}

/* =====================================================
   Blocs copiés depuis assets/planning.css
   Contiennent le sélecteur #yp-prochain-cours-dynamic
   Date extraction: 2026-03-02
   NOTE: Ces règles sont ajoutées ici pour rendre le
   composant `prochain_cours` autonome sans supprimer
   encore les copies dans planning.css (Phase 1).
===================================================== */

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .carte-cours-ligne::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 10px; /* bord gauche augmenté */
    height: 100%;
    background: var(--bg-cours);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .carte-cours-ligne {
    width: calc(100% - 12px);
    background: var(--yp-next-bg-card); /* ensure white background */
    display: flex; /* place contents horizontally */
    align-items: center;
    gap: 12px;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .carte-prof-nom {
    color: #fff;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .carte-heure {
    background: var(--bg-cours);
    color: #fff;
    padding: 7px 1px; /* adjusted per request */
    border-radius: var(--yp-next-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .carte-titre {
    color: #fff;
    display: inline-block;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .carte-salle {
    color: #fff;
    display: inline-block;
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .carte-prof {
    background: var(--bg-cours);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 6px 6px 8px;
    box-sizing: border-box;
    order: 2; /* move to the right in the flex row */
    margin-left: auto; /* push to right */
    margin-right: 2px; /* 2px from right edge as requested */
}

:is(#yp-prochain-cours-dynamic,#yp-prochain-cours-dynamic-mobile) .carte-prof img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    /* now on the right side: make full-round on the right edge */
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    border-top-left-radius: var(--yp-next-radius-sm);
    border-bottom-left-radius: var(--yp-next-radius-sm);
    display: block;
    box-shadow: 5px 0px 7px #26323a6b; /* subtle shadow to the left */
}