/* =====================================================================
   CF7 Calendrier de l’Avent — STYLES COMMUNS
   ===================================================================== */

/* ================================
   Variables
   ================================ */
:root {
    --door-dur: 1.8s;
    /* Durée d’ouverture des portes (par défaut) */
}

/* ================================
   Conteneurs généraux
   ================================ */
.cf7pp {
    contain: layout paint style;
}

/* wrapper [cf7_tirage] */
.cf7pp-featured-today-only {
    margin: 0;
    display: flex;
    justify-content: center;
}

/* ================================
   Carte jour (Commun)
   ================================ */
.cf7pp-day-card {
    position: relative;
    height: 160px;
    border-radius: 14px;
    background: linear-gradient(469deg, #D9363E 60%, #A31D23 100%);
    overflow: hidden;
    transform-style: flat;
    /* neutralise la 3D */
}

/* Interactivité commune lorsque la carte est cliquable */
.cf7pp-day-card-js {
    cursor: pointer;
}

.cf7pp-day-card-js:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .15);
    transform: translateY(-1px);
}

.cf7pp-day-card-js:focus-visible {
    outline: 3px solid #ffbe0b;
    outline-offset: 3px;
}

/* ================================
   Portes (Commun)
   ================================ */
.cf7pp-leaf {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .20) 0 10px, rgba(255, 255, 255, .10) 10px 20px),
        radial-gradient(circle at 20% 20%, #ff4d4f 0, #d9363e 60%, #a31d23 100%);
    will-change: transform;
    transition: transform var(--door-dur) cubic-bezier(.2, .8, .2, 1);
    transform: translateX(0);
    /* état fermé par défaut */
}

/* bordures intérieures + sens logique d’ouverture */
.cf7pp-leaf.left {
    left: 0;
    border-right: 3px solid rgba(0, 0, 0, .35);
}

.cf7pp-leaf.right {
    right: 0;
    border-left: 3px solid rgba(0, 0, 0, .35);
}

/* --- OUVERTURE VERS L’EXTÉRIEUR (slide) --- */
.cf7pp-day-card.open .cf7pp-leaf.left,
.cf7pp-day-card.open-instant .cf7pp-leaf.left {
    transform: translateX(-102%);
}

.cf7pp-day-card.open .cf7pp-leaf.right,
.cf7pp-day-card.open-instant .cf7pp-leaf.right {
    transform: translateX(102%);
}

/* ================================
   Contenu interne (Commun)
   ================================ */
.cf7pp-day-number {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: 'Open Sans';
    font-size: clamp(35px, 42px, 56px);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    pointer-events: none;
    /* au-dessus de tout */
}

.cf7pp-day-card.open .cf7pp-day-number {
    opacity: 0;
    transition: opacity .2s linear;
}

.cf7pp-day-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: center;
    padding: 20px 14px 18px;
    /* sous les portes */
}

.cf7pp-gift {
    font-size: clamp(25px, 30px, 35px);
    line-height: 40px;
    font-weight: 700;
    color: #ffffff;
}

.cf7pp-date-win {
    color: #ffffff;
    font-size: clamp(16px, 20px, 24px);
}

.cf7pp-winner {
    font-size: clamp(16px, 18px, 22px);
    font-weight: 700;
    color: #fff;
}

/* Neutralisation (instant) quand on force l’état final depuis JS */
.cf7pp-day-card.open-instant .cf7pp-leaf,
.cf7pp-day-card.open-instant .cf7pp-day-inner {
    transition: none !important;
}

/* ================================
   États, focus & accessibilité
   ================================ */
.cf7pp-day-card.is-future .cf7pp-winner {
    display: none;
}

.cf7pp-day-card.is-today-grid {
    outline: 3px solid #ffbe0b;
    box-shadow: 0 12px 28px rgba(255, 190, 11, .35);
}

/* Révélation synchronisée (priorité forte) */
.cf7pp-day-card.reveal-now .cf7pp-day-number {
    /* ne pas réafficher le numéro pendant le reveal */
    opacity: 0 !important;
    transition: none !important;
}

.cf7pp-day-card.reveal-now .cf7pp-day-inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Accessibilité : réduction du mouvement */
@media (prefers-reduced-motion: reduce) {

    .cf7pp-leaf,
    .cf7pp-day-inner,
    .cf7pp-card,
    .cf7pp-day-card-js {
        transition: none !important;
    }

    .cf7pp-confetti span {
        animation: none !important;
        display: none;
    }
}

/* =====================================================================
   SHORTCODE — [cf7_tirage] (grande case du jour)
   ===================================================================== */

/* Grande carte du jour : dimensions + emphase + durée d’anim dédiée */
.cf7pp-featured-today-only .cf7pp-day-card {
    width: clamp(260px, 600px, 800px);
    height: clamp(260px, 600px, 800px);
    border-radius: 20px;
    --door-dur: 2.4s;
    /* override durée sur la grande carte */
    outline: none;
    box-shadow: inset 0 0 0 6px #A31D23;
}

/* Numéro plus grand sur la grande carte */
.cf7pp-featured-today-only .cf7pp-day-number {
    font-size: clamp(140px, 150px, 160px);
}

/* Overlay "Lot n°X" affiché avant tirage */
.cf7pp-gift-overlay {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6px 10px;
    font-family: 'Open Sans';
    font-weight: 700;
    font-size: clamp(20px, 24px, 28px);
    line-height: 1.2;
    color: #fff;
    pointer-events: none;
}

/* Padding un poil plus généreux */
.cf7pp-featured-today-only .cf7pp-day-inner {
    padding: 20px 16px 24px;
}

/* Taille du gagnant adaptée à la grande carte */
.cf7pp-featured-today-only .cf7pp-winner {
    font-size: clamp(30px, 36px, 40px);
}

/* Confettis */
.cf7pp-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.cf7pp-confetti span {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    background: var(--c, #ffd166);
    transform: translate3d(0, 0, 0) rotate(0deg);
    animation: cf7pp-fall 1.3s linear forwards;
}

/* TIRAGE — après tirage : centre tout le contenu */
.cf7pp-featured-today-only .cf7pp-day-card.bravo .cf7pp-day-inner {
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 20px;
}

/* “Bravo !” à l'intérieur du bloc */
.cf7pp-featured-today-only .cf7pp-congrats {
    font-family: 'Open Sans';
    font-weight: 700;
    font-size: clamp(40px, 50px, 60px);
    line-height: 1;
    color: #fff;
}

/* Masque le numéro flottant d'origine en état final */
.cf7pp-featured-today-only .cf7pp-day-card.bravo .cf7pp-day-number {
    display: none !important;
}

@keyframes cf7pp-fall {
    0% {
        transform: translate3d(var(--x, 0px), -12px, 0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translate3d(var(--x, 0px), 280px, 0) rotate(560deg);
        opacity: 0;
    }
}

/* =====================================================================
   Petits réglages finaux
   ===================================================================== */

/* Durée par défaut (si non surchargée plus haut) */
:root {
    --door-dur: 1.0s;
}

/* Transition unique et propre (éviter doublons) */
.cf7pp-leaf {
    transition-property: transform;
    transition-duration: var(--door-dur);
    transition-timing-function: cubic-bezier(.2, .8, .2, 1);
}

/* Évite le flash du "Lot n°X" pendant l’état ouvert avant .bravo */
.cf7pp-day-card.open:not(.bravo) .cf7pp-gift {
    display: none;
}


/* === Empilement forcé : numéro > portes > contenu === */

/* Numéro au-dessus de tout */
.cf7pp-day-number {
    z-index: 3 !important;
}

/* Overlay "Lot n°X" affiché avant tirage */
.cf7pp-gift-overlay {
    z-index: 3;
}

/* Portes au-dessus du contenu */
.cf7pp-leaf {
    z-index: 2 !important;
}

/* Contenu en dessous des portes */
.cf7pp-day-inner {
    z-index: 1 !important;
}

/* Confettis au-dessus de tout */
.cf7pp-confetti {
    z-index: 4 !important;
}




/* =====================================================================
   HISTORIQUE — [cf7_historique]
   Cartes type calendrier, 1 gagnant par "ligne"
   ===================================================================== */

.cf7pp-histo-wrap {
    margin: 40px 0;
}

/* Liste verticale : une carte par gagnant, bien espacées */
.cf7pp-histo-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
}

.cf7pp-histo-card {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    height: auto;
    min-height: 140px;
}

.cf7pp-histo-card .cf7pp-day-number {
    display: none !important;
}

.cf7pp-histo-card .cf7pp-day-inner {
    position: relative;
    inset: auto;
}

/* Contenu texte à l'intérieur de la carte */
.cf7pp-histo-inner {
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
    padding: 20px 22px 18px;
}

/* Lignes : Jour / Lot / Nom Prénom */
.cf7pp-histo-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.4;
    width: 100%;
}

/* Libellé (Jour, Lot, Nom Prénom) */
.cf7pp-histo-label {
    width: 110px;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    opacity: .9;
}

/* Valeur (date, libellé du lot, nom) */
.cf7pp-histo-value {
    flex: 1;
    font-size: 16px;
    color: #ffffff;
}

.cf7pp-histo-row+.cf7pp-histo-row {
    margin-top: 4px;
}

@media (max-width: 480px) {
    .cf7pp-histo-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .cf7pp-histo-label {
        width: auto;
    }
}