---

/* =========================================================

1. STYLES GÉNÉRAUX DU SITE
   ========================================================= */

body {
color: #000;
background: #ffff00;
background-image: url(“https://acid2fik.com/wp-content/uploads/2025/08/texture-scaled.png”);
padding-top: 60px;
margin: 0;
min-height: 100vh;
overflow-x: hidden;
line-height: 1.8;
}

.dark, .dark .page-header {
color: #ffff00;
background-color: #000;
}

.site-footer {
background-color: #000;
color: #ffff00;
line-height: 2;
}

.site-header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
color: #ffff00;
font-size: 0.9375rem;
background: black;
}

.site-title {
margin: 0 .25rem;
font-size: 1.25rem;
line-height: 2.5;
font-weight: 700;
color: #ffff00;
letter-spacing: -1px;
}

user-navigation {

display: none;
margin-left: auto;
font-size: 0.75rem;

}

/* =========================================================

2. BLOCK IMAGE / IMAGES GLOBALES
   ========================================================= */

.wp-block-image img {
box-sizing: border-box;
height: auto;
max-width: 100%;
vertical-align: bottom;
margin-right: 2rem;
margin-left: 2rem;
}

/* =========================================================

3. FEATURED IMAGE (IMAGE D’EN-TÊTE)
   ========================================================= */

.featured-image .entry-header-container {
position: relative;
}

.featured-image .entry-header-container .post-thumbnail {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: 50%;
height: 100%;
overflow: hidden;
z-index: 0;
}

.featured-image .entry-header-container .post-thumbnail img,
.featured-image .entry-header-container .post-thumbnail video {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: right center;
border-radius: inherit;
}

.featured-image .entry-header-container .entry-header {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 2rem;
padding-right: 0;
color: #ffff00;
text-shadow: 1px 0 0 black, 0 3px 0 black, 0 8px 0 black,
2px 2px 0 black, -2px 2px 0 black,
2px -2px 0 black, -2px -2px 0 black;
}

/* =========================================================

4. BLOCK LOOP — STRUCTURE GÉNÉRALE (LECTEURS AUDIO)
   ========================================================= */

.block-loop-row .block-loop-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
background: #000; /* Lecteurs sombres */
padding: 12px 14px;
border-radius: 10px;
width: 100%;
color: #ffff00;
text-decoration: none;
transition: 0.25s ease;
margin-bottom: 2px;
border: none;
box-shadow: 0px 0px 0px 2px #ffff00;
}

.block-loop-item {
position: relative;
padding: 0;
max-width: 100%;
border-radius: var(–loop-radius);
display: flex;
flex-direction: row;
align-items: center;
scroll-snap-align: start;
order: 10;
}

/* =========================================================

5. BLOCK LOOP — THUMBNAILS
   ========================================================= */

.block-loop-item img {
width: 100% !important;
height: 100% !important;
border-radius: 8px;
object-fit: contain;
}

.album-tracks .post-thumbnail {
border-radius: 2px;
width: 4.5rem;
}

.block-loop-item .post-thumbnail {
position: relative;
margin: 0 !important;
padding: 0 !important;
border-radius: 4px;
background-image: url(“https://acidtekno.com/wp-content/uploads/2021/03/acid-cross-1.jpg”);
background-position: center center;
background-size: contain;
}

/* =========================================================

6. BLOCK LOOP — PLAY BUTTON & ACTIONS
   ========================================================= */

.btn-play {
width: 4.5rem;
height: 4.5rem;
border-radius: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 !important;
background-color: black;
color: #ffff00;
cursor: pointer;
transition: box-shadow .4s cubic-bezier(.25,.8,.25,1), transform .4s cubic-bezier(.25,.8,.25,1);
}

.btn-play:before {
content: ”;
width: 0;
height: 0;
border: 0.8em solid transparent;
border-left-color: currentColor;
border-left-width: 1.2em;
border-right-width: 0;
margin-inline-start: .25em;
transform: rotate(var(–transform-rotate));
}

.block-loop-item .btn-play {
width: 40px;
height: 40px;
background: black;
color: #ffff00;
opacity: 0.7;
}

.block-loop-item .entry-action {
opacity: 1;
pointer-events: none;
color: #222;
background-color: transparent;
position: absolute;
z-index: 3;
left: 50%;
top: 50%;
width: 100%;
height: 65%;
padding: 0 5%;
border-radius: inherit;
transform: translate(-50%, -50%);
transition: opacity .3s;
display: flex;
align-items: center;
justify-content: space-around;
}

/* =========================================================

7. BOUTONS & ICONES
   ========================================================= */

.icon-plus {
border: none;
padding: .75rem .375rem;
background-color: transparent;
color: currentColor;
position: relative;
display: none;
}

/* =========================================================

8. TITRES / TYPOGRAPHIE GLOBALE
   ========================================================= */

h1, .h1, .title, .archive-title, .no-comments {
font-size: 4rem;
font-weight: 900;
color: #ffff00;
display: inline-block;
text-shadow: 1px 0 0 black, 0 3px 0 black, 0 0px 0 black,
2px 2px 0 black, -1px 2px 0 black,
2px -2px 0 black, -2px -3px 0 black;
padding: 0 20px;
overflow: visible;
-webkit-mask-image: url(“https://acidtekno.com/wp-content/uploads/2025/11/mask.png”);
-webkit-mask-size: contain;
-webkit-mask-repeat: repeat;
-webkit-mask-position: center;
mask-image: url(“https://acidtekno.com/wp-content/uploads/2025/11/mask.png”);
mask-size: contain;
mask-repeat: repeat;
mask-position: center;
}

.block-loop-item .entry-artist,
.block-loop-item .entry-title {
display: block !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
font-size: 0.8rem;
line-height: 1.3em;
margin: 0;
}

.block-loop-item .author {
display:none;
}

/* =========================================================

9. CONTAINERS WORDPRESS
   ========================================================= */

.container,
.navigation,
.comments-area,
.entry-header,
.entry-content,
.entry-summary,
.entry-footer,
.archive-header,
.archive-content {
padding-left: 1.5rem;
padding-right: 1.5rem;
}

/* =========================================================

10. VISIBILITÉ MOBILE / DESKTOP
    ========================================================= */

.vm { display: none; }
.nvm { display: block; }

@media (max-width: 768px) {
.vm { display: block; }
.nvm { display: none; }
}

/* Le reste du CSS reste identique avec fond clair et lecteurs sombres */