#fp-big-name {
    display: none;
}
#slogan {
    display: none;
}

/* 1) Quand un thème est actif (.highlightTopic), ne montrer QUE les lignes surlignées (.sel_t) */
.dcal.highlightTopic:has(tr.sel_t) tr:not(.sel_t) {
    display: none !important;
}

/* 2) Optionnel: masquer entièrement les jours qui n'ont aucun événement du thème */
.dcal.highlightTopic .day:not(:has(tr.sel_t)) {
    display: none !important;
}

/* 3) Optionnel: si un <hr class="week"> se retrouve seul entre deux jours masqués */
.dcal.highlightTopic hr.week:has(+ .day[style*="display: none"]) {
    display: none !important;
}

/* Conteneur : légère vibe “flyer” */
#announcement {
    position: relative;
    border-radius: .6rem;
    box-shadow: 0 10px 24px rgb(0 0 0 / .10);
    isolation: isolate;
    overflow: hidden; /* Crucial pour que le contenu ne dépasse pas pendant qu'il rétrécit */
    
    /* Paramètres de l'animation au scroll */
    animation: fadeOutCompletely linear both;
    animation-timeline: scroll();
    animation-range: 0px 300px; 
}

/* Léger motif en arrière-plan (très discret) */
#announcement::after {
    content:"";
    position:absolute; inset:0; z-index:-1;
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, currentColor 6%, transparent) 0 8px,
            transparent 8px 16px);
    opacity:.06;
    border-radius: inherit;
    pointer-events:none;
}

/* Boutons “sticker” non soulignés */
#announcement a {
    text-decoration: none;
    display:inline-block;
    margin:.25rem .25rem;
    padding:.5rem .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing:.4px;
    color: var(--btn-fg, #111);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, currentColor 18%, transparent),
            color-mix(in srgb, currentColor 8%, transparent));
    border: 2px solid currentColor;
    border-radius: .55rem .9rem .55rem .9rem;
    transform: skew(-2deg);
    box-shadow:
        0 2px 0 currentColor,
        0 6px 14px rgb(0 0 0 / .15);
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        background-color .12s ease,
        border-color .12s ease,
        filter .12s ease;
}

/* Accent “punky”: couleur néon en overlay */
#announcement a::after {
    content:"";
    position:absolute; inset:0; border-radius: inherit; pointer-events:none;
    background: radial-gradient(120% 120% at 10% -10%, color-mix(in srgb, currentColor 25%, transparent), transparent 40%),
                radial-gradient(120% 120% at 110% 110%, color-mix(in srgb, deeppink 35%, transparent), transparent 50%);
    mix-blend-mode: screen; opacity:.35;
}

/* Hover/active: micro-rotation, relief qui claque */
#announcement a:hover {
    transform: translateY(-2px) rotate(-1deg) skew(-2deg);
    box-shadow:
        0 3px 0 currentColor,
        0 12px 22px rgb(0 0 0 / .22);
    filter: saturate(1.15) contrast(1.05);
}
#announcement a:active {
    transform: translateY(0) rotate(0deg) skew(-2deg);
    box-shadow: 0 1px 0 currentColor, 0 6px 12px rgb(0 0 0 / .18);
}

/* Variante “warning/punk” pour le séparateur */
#announcement .subsection {
    border:0; height: 3px; margin:.65rem 0;
    background:
        repeating-linear-gradient(90deg,
            currentColor 0 10px,
            transparent 10px 18px);
    opacity:.35;
    filter: saturate(1.2);
    border-radius: 2px;
}

/* Mobile: boutons pleine largeur */
@media (max-width: 560px) {
    #announcement a { width: 100%; text-align:center; }
}

/* Réduction d’animations si préférée */
@media (prefers-reduced-motion: reduce) {
    #announcement a { transition:none; }
}

/* Animation "Punk" : vibration irrégulière type vieux film */
@keyframes punk-shake {
    0% { transform: rotate(-12deg) translate(0, 0); }
    25% { transform: rotate(-10deg) translate(1px, -1px); }
    50% { transform: rotate(-13deg) translate(-1px, 1px); }
    75% { transform: rotate(-11deg) translate(1px, 0); }
    100% { transform: rotate(-12deg) translate(0, 0); }
}

#fp-logo {
    position: relative;
    display: inline-block;
}

#fp-logo::after {
    content: "10 ANS !";
    position: absolute;
    bottom: 5px;
    right: -10px;
    background-color: #e60000;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    font-weight: 900;
    padding: 4px 12px;
    text-transform: uppercase;
    clip-path: polygon(2% 8%, 98% 2%, 96% 95%, 5% 90%);
    box-shadow: 4px 4px 0px #000;
    border: 2px solid #000;
    animation: punk-shake 0.4s infinite step-end;
    pointer-events: none;
    z-index: 100;
}

#fp-logo:hover::after {
    background-color: #000;
    color: #fff;
    animation: punk-shake 0.1s infinite;
}

/* --- AFFICHAGE DU LOGO "10 ANS !" EN VERSION MOBILE NATIVE --- */
@keyframes punk-shake-mobile {
    0% { transform: rotate(-8deg) scale(0.9); }
    50% { transform: rotate(-12deg) scale(0.9); }
    100% { transform: rotate(-8deg) scale(0.9); }
}

body.mobile #siteName {
    position: relative;
    display: inline-block !important;
}

body.mobile #siteName::after {
    content: "10 ANS !";
    position: absolute;
    top: -8px;
    right: -25px;
    background-color: #e60000;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 6px;
    text-transform: uppercase;
    clip-path: polygon(5% 5%, 95% 2%, 92% 95%, 8% 92%);
    border: 1px solid #000;
    box-shadow: 2px 2px 0px #000;
    animation: punk-shake-mobile 0.6s infinite step-end;
    z-index: 999;
    pointer-events: none;
}

/* Animation de disparition du bloc d'annonce */
@keyframes fadeOutCompletely {
    from {
        opacity: 1;
        max-height: 600px;
        margin-bottom: 20px;
        padding: 20px;
        visibility: visible;
    }
    to {
        opacity: 0;
        max-height: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        visibility: hidden;
        pointer-events: none;
    }
}