/* =========================================
   1. CONFIGURATION GÉNÉRALE
   ========================================= */
html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    /* Fallback puis dvh pour mobile (exclut la barre d'adresse) */
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    font-family: 'Roboto', sans-serif;
    background-color: #e8e8e8;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        #d4d4d4 2px,
        #d4d4d4 4px
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;

    /* Curseur Wii personnalisé */
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=40779'), auto !important;
}

/* Appliquer le curseur sur tous les éléments interactifs */
button, a, .channel, .pill-btn, .glass-btn, .side-arrow {
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=40779'), auto !important;
}

/* =========================================
   2. ÉCRAN D'INTRO (NOIR)
   ========================================= */
#intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.5s ease-out;
}

.warning-header {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #b0b0b0;
}

.warning-icon {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.intro-text {
    max-width: 800px;
    margin-bottom: 50px;
    line-height: 1.6;
    font-size: 1.2rem;
    color: #b0b0b0;
}

.highlight {
    color: white;
    font-weight: bold;
    font-style: italic;
}

/* Bouton clignotant "Appuyer sur A" */
.press-btn {
    margin-top: 40px;
    color: #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: blink 2s infinite ease-in-out;
}

.mouse-icon {
    width: 50px;
    height: 50px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 10px;
}

@keyframes blink {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* =========================================
   3. CAROUSEL (GRILLE + PAGES)
   ========================================= */

/* Wrapper : clip les pages hors écran */
.grid-wrapper {
    width: 100%;
    height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-bottom: 10vh;
    z-index: 1;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1s, transform 1s ease;
}

.grid-wrapper.grid-visible {
    opacity: 1;
    transform: scale(1);
}

/* Track : les deux pages côte à côte */
.grid-track {
    display: flex;
    gap: 5vw;
    align-items: center;
    flex-shrink: 0;
    /* translateX géré par JS */
    will-change: transform;
}

/* Une page de la grille */
.grid-page {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2vh;
    width: 82vw;
    max-width: 1100px;
    height: 60vh;
    flex-shrink: 0;
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Page inactive : atténuée et légèrement réduite */
.grid-page.page-inactive {
    opacity: 0.35;
    transform: scale(0.93);
}

.channel {
    background-color: #ffffff;
    border: 4px solid #b0b0b0;
    border-radius: 20px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.1s, border-color 0.1s;
}

.channel.hidden {
    opacity: 0;
    pointer-events: none;
}

.channel:not(.empty):hover {
    border-color: #4ac0e0;
    box-shadow: 0 0 15px #4ac0e0;
    transform: scale(1.02);
    z-index: 10;
}

.channel.empty {
    background-color: #d4d4d4;
    cursor: default;
    border-color: #b0b0b0;
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50" viewBox="0 0 100 50"><text x="50" y="35" font-family="sans-serif" font-size="30" fill="%23c0c0c0" text-anchor="middle">Wii</text></svg>'),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.1) 2px, rgba(255,255,255,0.1) 4px);
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: contain, auto;
}

/* =========================================
   4. ÉCRAN DE DÉMARRAGE (ZOOM / OVERLAY)
   ========================================= */
#full-overlay {
    position: fixed;
    background: white;
    z-index: 5000;
    overflow: hidden;
    display: none;
    flex-direction: column;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    /* Transition fluide pour l'effet de zoom */
    transition: 
        top 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
        left 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
        width 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
        height 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
        border-radius 0.6s ease;
}

.overlay-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease 0.2s;
}

#full-overlay.active .overlay-content {
    opacity: 1;
}

/* Éléments standards de l'overlay */
.start-title { font-size: 4rem; color: #555; margin: 20px 0; }
.start-subtitle { font-size: 1.5rem; color: #888; margin-bottom: 40px; }
.start-icon { font-size: 8rem; }

/* Flèches de navigation */
.side-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 80px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s ease 0.5s;
    z-index: 6000; /* Toujours au-dessus */
}

#full-overlay.active .side-arrow { opacity: 1; }
.side-arrow.left { left: 30px; }
.side-arrow.right { right: 30px; }
.side-arrow polygon { fill: #8cdbff; stroke: #3ea0e0; stroke-width: 2; }

/* Footer de l'overlay (Boutons Démarrer / Menu Wii) */
.overlay-footer {
    height: 120px;
    width: 100%;
    background-color: #dadada;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #c0c0c0 2px, #c0c0c0 4px);
    border-top: 4px solid #b0b0b0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    
    transform: translateY(100%);
    transition: transform 0.5s ease 0.2s;
    
    /* CORRECTIF : Priorité d'affichage */
    position: relative;
    z-index: 2000;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
}

#full-overlay.active .overlay-footer {
    transform: translateY(0);
}

.pill-btn {
    width: 280px;
    height: 70px;
    border-radius: 40px;
    background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 50%, #dadada 100%);
    border: 4px solid #66c6e6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #555;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    transition: transform 0.1s;
}

.pill-btn:hover {
    border-color: #3ea0e0;
    box-shadow: 0 0 20px rgba(74, 192, 224, 0.8);
    transform: scale(1.05);
}

.pill-btn:active {
    transform: scale(0.98);
}

/* =========================================
   5. FOOTER PRINCIPAL (BARRE DU BAS)
   ========================================= */
.footer-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 100;
    transition: transform 0.5s;
}

.footer-hidden {
    transform: translateY(100%);
}

.footer-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: drop-shadow(0px -5px 5px rgba(0,0,0,0.1));
}

/* Boutons ronds (Wii / Mail) */
.wii-btn-wrapper {
    position: absolute;
    bottom: 25px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #d0d0d0, #f0f0f0);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.left-btn { left: 40px; }
.right-btn { right: 40px; }

.glass-btn {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #dcdcdc 60%, #a0a0a0 100%);
    border: 2px solid #b0b0b0;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.1s;
}

.glass-btn:hover {
    transform: scale(1.05);
    border-color: #4ac0e0;
}

.glass-btn::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 15px;
    width: 45px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.1));
    pointer-events: none;
}

.btn-text { color: #999; font-size: 24px; font-weight: bold; letter-spacing: -1px; }
.btn-icon { width: 50%; opacity: 0.6; fill: #999; }

/* Zone Centrale (Horloge / Date / Nom) */
.clock-area {
    text-align: center;
    margin-bottom: 15px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portfolio-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    color: #666;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 5px;
    border-bottom: 3px solid #4ac0e0;
    margin-bottom: 15px;
    width: 120%;
}

.digital-time {
    font-family: 'Orbitron', monospace;
    font-size: 3.5rem;
    color: #888;
    letter-spacing: 2px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    text-shadow: 2px 2px 0px rgba(255,255,255,0.8);
    line-height: 1;
}

.ampm {
    font-size: 1.2rem;
    margin-left: 8px;
    font-weight: bold;
    font-family: sans-serif;
    color: #888;
}

.date-text {
    font-size: 1.4rem;
    color: #777;
    margin-top: 5px;
    font-weight: 500;
}

.visitor-count {
    font-size: 0.72rem;
    color: #aaa;
    margin-top: 4px;
    letter-spacing: 0.5px;
    font-family: 'Orbitron', sans-serif;
}
body.dark-mode .visitor-count { color: #4a5568; }


/* =========================================
   6. STYLE SPÉCIFIQUE PAGE "MOI"
   ========================================= */
.tobias-layout {
    text-align: center;
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #333;
    max-width: 900px;
    padding: 20px;
    animation: fadeIn 0.8s ease;
}

.tobias-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 6px solid #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    object-fit: cover;
    margin-bottom: 20px;
}

.tobias-intro {
    font-size: 1.8rem;
    margin-bottom: 15px;
    line-height: 1.4;
}

.name-highlight {
    color: #e67e22;
    font-weight: bold;
}

.tobias-sub {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: #555;
    font-weight: bold;
}

.blue-highlight {
    color: #2980b9;
    font-weight: bold;
}

.tobias-desc {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: #666;
    font-style: italic;
}

.tobias-cta {
    font-size: 1.5rem;
    color: #95a5a6;
    margin-top: 40px;
    font-family: sans-serif;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.intro-text {
    text-transform: uppercase;
}
/* --- STYLE RUBANS DE CHANTIER (EN TRAVAUX) --- */

.construction-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.tape-cross {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%; /* Plus large pour couvrir les coins */
    height: 60px;
    background: repeating-linear-gradient(
        45deg,
        #f1c40f,
        #f1c40f 20px,
        #2c3e50 20px,
        #2c3e50 40px
    );
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2c3e50;
    font-weight: bold;
    font-size: 1.5rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    z-index: 100;
    pointer-events: none; /* Permet de voir le texte dessous */
}

/* La croix : une barre à 45° et l'autre à -45° */
.tape-1 { transform: translate(-50%, -50%) rotate(45deg); }
.tape-2 { transform: translate(-50%, -50%) rotate(-45deg); }

/* Classe pour griser le bouton démarrer */
.btn-disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    filter: grayscale(100%) !important;
    cursor: not-allowed !important;
}

/* =========================================
   7. INTÉRIEUR DES CHAÎNES (GRILLE)
   ========================================= */
.channel-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.ch-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.ch-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ch-fullimg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ch-emoji {
    font-size: 3rem;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.ch-label {
    margin: 5px 0;
    position: relative;
    z-index: 2;
    color: #333;
    text-shadow: 0 0 10px white;
}

.ttt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

/* =========================================
   8. OVERLAY IMAGE-BG
   ========================================= */
.overlay-image-bg {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.overlay-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-gradient {
    position: absolute;
    inset: 0;
}

.overlay-text-block {
    position: relative;
    z-index: 10;
    color: white;
    padding: 20px;
    max-width: 80%;
}

.ov-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.8);
}

.ov-title {
    font-size: 3rem;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 4px 10px rgba(0,0,0,1);
}

.ov-desc {
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 300;
    text-shadow: 0 2px 5px rgba(0,0,0,1);
    color: #eee;
}

/* =========================================
   9. OVERLAY "MOI" — NOUVEAU DESIGN
   ========================================= */
.moi-layout {
    display: flex;
    gap: 40px;
    align-items: stretch;
    padding: 30px 50px;
    max-width: 900px;
    width: 100%;
    animation: fadeIn 0.5s ease;
}

.moi-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.moi-avatar-ring {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg, #4ac0e0, #a855f7);
    box-shadow: 0 0 30px rgba(74, 192, 224, 0.4);
    margin-bottom: 16px;
}

.moi-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #1a1a2e;
    display: block;
}

.moi-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
}

.moi-role {
    font-size: 0.95rem;
    color: #4ac0e0;
    margin-top: 6px;
    font-style: italic;
}

.moi-location {
    font-size: 0.9rem;
    color: #888;
    margin-top: 8px;
}

.moi-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.moi-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    backdrop-filter: blur(6px);
}

.moi-card--highlight {
    background: rgba(74, 192, 224, 0.12);
    border-color: rgba(74, 192, 224, 0.4);
    box-shadow: 0 0 20px rgba(74, 192, 224, 0.15);
}

.moi-card-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.moi-card-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888;
    margin-bottom: 4px;
}

.moi-card-value {
    font-size: 1rem;
    color: #ddd;
    line-height: 1.4;
}

.moi-card-value strong {
    color: white;
}

.moi-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.skill-pill {
    background: rgba(74, 192, 224, 0.2);
    border: 1px solid rgba(74, 192, 224, 0.5);
    color: #4ac0e0;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.moi-socials {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.moi-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #aaa;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.moi-social-btn:hover {
    background: rgba(74,192,224,0.2);
    border-color: rgba(74,192,224,0.5);
    color: #4ac0e0;
}

.moi-cta {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    margin-top: 4px;
    font-style: italic;
}

/* =========================================
   10. CARTE TICTACTOE — NOUVEAU DESIGN
   ========================================= */
.ttt-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460) !important;
}

.ttt-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.ttt-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.ttt-x { color: #4ac0e0; text-shadow: 0 0 8px #4ac0e0; }
.ttt-o { color: #e06060; text-shadow: 0 0 8px #e06060; }
.ttt-win { background: rgba(74,192,224,0.25); }

.ttt-label {
    margin: 10px 0 0 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: none;
    position: relative;
    z-index: 2;
}

/* =========================================
   11. CARTE "MOI" — NOUVEAU DESIGN
   ========================================= */
.moi-card-inner {
    justify-content: flex-end !important;
    align-items: flex-start !important;
}

.moi-card-info {
    position: relative;
    z-index: 2;
    padding: 10px 12px;
    width: 100%;
}

.moi-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    line-height: 1.2;
}

.moi-card-tag {
    font-size: 0.72rem;
    color: #4ac0e0;
    margin-top: 3px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* =========================================
   12. MODAL CONTACT
   ========================================= */
#contact-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 8000;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 50px 160px 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#contact-modal.contact-visible {
    opacity: 1;
    pointer-events: all;
}

#contact-modal.contact-visible .contact-card {
    transform: translateY(0);
}

.contact-card {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid rgba(74,192,224,0.3);
    border-radius: 20px;
    padding: 24px 28px;
    width: 360px;
    box-shadow: 0 0 40px rgba(74,192,224,0.2), 0 20px 60px rgba(0,0,0,0.5);
    position: relative;
    transform: translateY(30px);
    transition: transform 0.3s ease;
}

.contact-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: rgba(255,255,255,0.08);
    border: none;
    color: #888;
    font-size: 1rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.contact-close:hover { background: rgba(255,255,255,0.15); color: white; }

.contact-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.contact-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #4ac0e0;
    flex-shrink: 0;
}

.contact-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

.contact-role {
    font-size: 0.78rem;
    color: #4ac0e0;
    margin-top: 3px;
}

.contact-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ccc;
    font-size: 0.88rem;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background 0.2s;
}

.contact-item:hover {
    background: rgba(74,192,224,0.1);
    color: white;
}

.contact-item-icon { font-size: 1.1rem; flex-shrink: 0; }

/* =========================================
   13. BOUTON MUSIQUE
   ========================================= */
.music-btn {
    position: absolute;
    bottom: 32px;
    left: 160px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #d0d0d0, #f0f0f0);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), 0 3px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=40779'), auto !important;
    color: #888;
    transition: transform 0.1s, box-shadow 0.2s, color 0.2s;
    z-index: 101;
}

.music-btn svg {
    width: 22px;
    height: 22px;
}

.music-btn:hover {
    transform: scale(1.08);
    color: #4ac0e0;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), 0 0 10px rgba(74,192,224,0.4);
}

.music-btn:active { transform: scale(0.96); }

.music-btn.music-muted { color: #bbb; }

/* Dark mode */
body.dark-mode .music-btn {
    background: linear-gradient(to bottom, #1e2130, #2a2f45);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5), 0 3px 8px rgba(0,0,0,0.3);
    color: #555;
}

body.dark-mode .music-btn:hover { color: #4ac0e0; }
body.dark-mode .music-btn.music-muted { color: #333; }

/* =========================================
   14. DARK MODE
   ========================================= */

/* --- Body & fond général --- */
html:has(body.dark-mode),
body.dark-mode {
    background-color: #111318;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        #1a1d24 2px,
        #1a1d24 4px
    );
}

/* --- Chaînes (grille) --- */
body.dark-mode .channel {
    background-color: #1e2130;
    border-color: #2e3350;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.4);
}

body.dark-mode .channel:not(.empty):hover {
    border-color: #4ac0e0;
    box-shadow: 0 0 15px #4ac0e0;
}

body.dark-mode .channel.empty {
    background-color: #181b27;
    border-color: #252840;
    background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50" viewBox="0 0 100 50"><text x="50" y="35" font-family="sans-serif" font-size="30" fill="%23252840" text-anchor="middle">Wii</text></svg>'),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px);
}

/* --- Overlay principal --- */
body.dark-mode #full-overlay {
    background: #13161f;
}

body.dark-mode .overlay-footer {
    background-color: #0e1018;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #0a0c14 2px, #0a0c14 4px);
    border-top-color: #2e3350;
}

body.dark-mode .pill-btn {
    background: linear-gradient(to bottom, #1e2130 0%, #16192a 50%, #111420 100%);
    border-color: #2e6080;
    color: #aaa;
}

body.dark-mode .pill-btn:hover {
    border-color: #4ac0e0;
    color: white;
}

/* --- Overlay contenu texte (cas default/tictactoe) --- */
body.dark-mode .start-title { color: #ccc; }
body.dark-mode .start-subtitle { color: #666; }

/* --- Footer principal --- */
body.dark-mode .footer-container .footer-bg path {
    fill: url(#greyGradDark);
    stroke: #2e6080;
}

body.dark-mode .footer-container {
    --footer-fill: #0e1018;
}

body.dark-mode .wii-btn-wrapper {
    background: linear-gradient(to bottom, #1e2130, #2a2f45);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5), 0 5px 10px rgba(0,0,0,0.3);
}

body.dark-mode .glass-btn {
    background: radial-gradient(circle at 35% 35%, #2e3350 0%, #1a1d2e 60%, #0e1018 100%);
    border-color: #2e3350;
}

body.dark-mode .glass-btn:hover { border-color: #4ac0e0; }

body.dark-mode .glass-btn::after {
    background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}

body.dark-mode .btn-text { color: #555; }
body.dark-mode .btn-icon { fill: #555; }

body.dark-mode .portfolio-title { color: #4ac0e0; border-bottom-color: #2e6080; }
body.dark-mode .digital-time { color: #4a5568; text-shadow: none; }
body.dark-mode .date-text { color: #4a5568; }

/* --- Footer SVG recolorisé via filtre --- */
body.dark-mode .footer-bg svg path[fill="url(#greyGrad)"] {
    fill: #0e1018;
    stroke: #2e6080;
}
body.dark-mode .footer-bg {
    filter: brightness(0.25) hue-rotate(200deg);
}

/* --- Bouton Wii (toggle) actif en dark mode --- */
body.dark-mode .left-btn .glass-btn {
    background: radial-gradient(circle at 35% 35%, #1e3a4a 0%, #0f2535 60%, #071520 100%);
    border-color: #4ac0e0;
    box-shadow: 0 0 12px rgba(74,192,224,0.4);
}

body.dark-mode .left-btn .btn-text { color: #4ac0e0; }

/* --- ch-label sur cartes (sans fond image) --- */
body.dark-mode .ch-label { color: #ddd; text-shadow: 0 0 8px rgba(0,0,0,0.8); }

/* --- Modal contact --- */
body.dark-mode #contact-modal { background: rgba(0,0,0,0.75); }

/* =========================================
   15. FLÈCHES DE PAGINATION (ENTRE PAGES)
   ========================================= */
.page-arrow {
    position: fixed;
    top: calc(50% - 7vh);
    transform: translateY(-50%);
    width: 44px;
    height: 72px;
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=40779'), pointer;
    z-index: 50;
    transition: opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

.page-arrow--left  { left: 14px; }
.page-arrow--right { right: 14px; }

.page-arrow polygon {
    fill: #c0c0c0;
    stroke: #aaa;
    stroke-width: 2;
    transition: fill 0.2s, stroke 0.2s;
}

.page-arrow:hover polygon { fill: #4ac0e0; stroke: #3ea0e0; }

body.dark-mode .page-arrow polygon        { fill: #3a3d55; stroke: #4a4e70; }
body.dark-mode .page-arrow:hover polygon  { fill: #4ac0e0; stroke: #3ea0e0; }

/* Cachées quand l'overlay est ouvert */
body.overlay-open .page-arrow { opacity: 0 !important; pointer-events: none !important; }

/* =========================================
   17. TOUCH — désactive effets hover sur mobile
   ========================================= */
@media (hover: none) {
    .channel:not(.empty):hover {
        transform: none;
        border-color: #b0b0b0;
        box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
    }
    body.dark-mode .channel:not(.empty):hover {
        border-color: #2e3350;
        box-shadow: 3px 3px 10px rgba(0,0,0,0.4);
    }
    .pill-btn:hover, .glass-btn:hover { transform: none; }
}

/* =========================================
   18. RESPONSIVE — TABLETTE (≤ 768px)
   ========================================= */
@media (max-width: 768px) {

    /* --- Carousel : grille 2×4 sur tablette (8 chaînes/page) --- */
    .grid-wrapper { height: 58vh; margin-bottom: 14vh; }
    .grid-page {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        height: 58vh;
        gap: 1.5vh;
        width: 90vw;
    }
    .page-arrow { width: 32px; height: 52px; }
    .page-arrow--left  { left: 6px; }
    .page-arrow--right { right: 6px; }

    /* --- Footer principal --- */
    .footer-container { height: 110px; }

    .wii-btn-wrapper {
        width: 62px;
        height: 62px;
        bottom: 18px;
    }
    .left-btn { left: 12px; }
    .right-btn { right: 12px; }

    .glass-btn { width: 52px; height: 52px; }
    .glass-btn::after { width: 30px; height: 20px; left: 9px; }
    .btn-text { font-size: 15px; }
    .btn-icon { width: 44%; }

    .music-btn {
        left: 86px;
        bottom: 27px;
        width: 36px;
        height: 36px;
    }
    .music-btn svg { width: 17px; height: 17px; }

    /* Clock : contrainte pour ne pas déborder sur les boutons */
    .clock-area {
        max-width: calc(100% - 220px);
        margin-bottom: 10px;
        overflow: hidden;
    }
    .portfolio-title {
        font-size: clamp(0.55rem, 2vw, 1rem);
        letter-spacing: 0;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 6px;
    }
    .digital-time { font-size: 2.2rem; letter-spacing: 1px; }
    .date-text { font-size: 0.9rem; margin-top: 2px; }

    /* --- Overlay footer (boutons Démarrer / Menu Wii) --- */
    .overlay-footer {
        height: 80px;
        gap: 24px;
    }
    .pill-btn {
        width: 150px;
        height: 52px;
        font-size: 1.2rem;
        border-width: 3px;
    }

    /* --- Flèches de navigation --- */
    .side-arrow { width: 36px; height: 56px; }
    .side-arrow.left { left: 8px; }
    .side-arrow.right { right: 8px; }

    /* --- Overlay texte générique --- */
    .start-title { font-size: 2.5rem; }
    .start-subtitle { font-size: 1.1rem; }
    .start-icon { font-size: 5rem; }

    /* --- Overlay image-bg --- */
    .ov-emoji { font-size: 3.5rem; margin-bottom: 12px; }
    .ov-title { font-size: 2rem; letter-spacing: 1px; }
    .ov-desc { font-size: 1.1rem; }

    /* --- Overlay "Moi" : colonne unique --- */
    .moi-layout {
        flex-direction: column;
        align-items: center;
        padding: 16px 20px;
        gap: 16px;
        overflow-y: auto;
        max-height: 100%;
    }
    .moi-left { flex-direction: row; gap: 16px; width: 100%; }
    .moi-avatar-ring { width: 80px; height: 80px; flex-shrink: 0; margin-bottom: 0; }
    .moi-name { font-size: 1.3rem; }
    .moi-role { font-size: 0.85rem; }
    .moi-location { font-size: 0.8rem; }
    .moi-right { width: 100%; gap: 10px; }
    .moi-card { padding: 10px 14px; }
    .moi-card-icon { font-size: 1.4rem; }
    .moi-card-value { font-size: 0.9rem; }
    .moi-card-title { font-size: 0.65rem; }
    .moi-cta { font-size: 0.8rem; }

    /* --- Overlay scrollable sur mobile --- */
    .overlay-content { overflow-y: auto; }

    /* --- Intro screen --- */
    .warning-header { font-size: 1rem; margin-bottom: 20px; }
    .warning-icon { width: 36px; height: 36px; margin-right: 12px; }
    .intro-text { font-size: 0.85rem; max-width: 92%; padding: 0 16px; margin-bottom: 30px; }
    .press-btn { margin-top: 20px; }
    .mouse-icon { width: 36px; height: 36px; }

    /* --- Modal contact : centré en bas --- */
    #contact-modal {
        align-items: flex-end;
        justify-content: center;
        padding: 0 0 120px 0;
    }
    .contact-card {
        width: calc(100% - 32px);
        max-width: 420px;
        padding: 20px 20px;
    }
}

/* =========================================
   19. RESPONSIVE — TÉLÉPHONE (≤ 480px)
   ========================================= */
@media (max-width: 480px) {

    /* --- Carousel : grille 2×4 sur téléphone (8 chaînes/page) --- */
    .grid-wrapper { height: 58vh; margin-bottom: 14vh; }
    .grid-page {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        height: 58vh;
        gap: 1vh;
        width: 96vw;
    }
    .channel { border-width: 3px; border-radius: 14px; }
    .page-arrow { width: 26px; height: 44px; }

    /* --- Footer --- */
    .footer-container { height: 96px; }

    .wii-btn-wrapper { width: 52px; height: 52px; bottom: 16px; }
    .left-btn { left: 10px; }
    .right-btn { right: 10px; }
    .glass-btn { width: 44px; height: 44px; }
    .glass-btn::after { width: 26px; height: 17px; left: 8px; top: 4px; }
    .btn-text { font-size: 12px; }

    .music-btn {
        left: 72px;
        bottom: 24px;
        width: 30px;
        height: 30px;
    }
    .music-btn svg { width: 14px; height: 14px; }

    /* Sur petit téléphone : cache le titre, garde juste l'heure */
    .portfolio-title { display: none; }
    .digital-time { font-size: 2rem; letter-spacing: 1px; }
    .date-text { font-size: 0.85rem; }
    .clock-area { max-width: calc(100% - 200px); margin-bottom: 12px; }

    /* --- Overlay footer --- */
    .overlay-footer { height: 68px; gap: 16px; }
    .pill-btn {
        width: 130px;
        height: 44px;
        font-size: 1rem;
        border-radius: 26px;
    }

    /* --- Overlay image-bg --- */
    .ov-emoji { font-size: 2.8rem; margin-bottom: 8px; }
    .ov-title { font-size: 1.6rem; }
    .ov-desc { font-size: 0.95rem; }
    .overlay-text-block { padding: 12px; max-width: 92%; }

    /* --- Overlay "Moi" --- */
    .moi-avatar-ring { width: 64px; height: 64px; }
    .moi-name { font-size: 1.1rem; }

    /* --- Intro screen --- */
    .intro-text { font-size: 0.78rem; }

    /* --- Contact modal --- */
    .contact-card { padding: 16px; }
    .contact-name { font-size: 1rem; }
    .contact-item { font-size: 0.82rem; padding: 6px 10px; }
}

/* =========================================
   20. SÉLECTEUR DE LANGUE
   ========================================= */
#lang-switcher {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 4px 6px;
    gap: 2px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.13);
    border: 1px solid rgba(0,0,0,0.07);
    transition: background 0.3s;
}

.lang-btn {
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=40779'), auto !important;
    transition: transform 0.18s ease;
    outline: none;
}
.lang-btn:hover { transform: scale(1.1); }
.lang-btn.lang-active { background: transparent; }

.lang-btn:hover:not(.lang-active) { background: rgba(255,255,255,0.5); }

.flag-img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    filter: grayscale(40%) opacity(0.6);
    transition: filter 0.2s, box-shadow 0.2s;
}
.lang-btn.lang-active .flag-img {
    filter: grayscale(0%) opacity(1);
    box-shadow: 0 0 0 2px #4ac0e0;
}
.lang-btn:hover .flag-img { filter: grayscale(0%) opacity(0.9); }

.lang-divider {
    width: 1px;
    height: 20px;
    background: rgba(0,0,0,0.1);
    flex-shrink: 0;
}

/* Dark mode */
body.dark-mode #lang-switcher {
    background: rgba(20,22,35,0.92);
    border-color: rgba(255,255,255,0.07);
}
body.dark-mode .lang-btn { color: #444; }
body.dark-mode .lang-btn.lang-active { background: #2e3350; color: #ddd; box-shadow: none; }
body.dark-mode .lang-divider { background: rgba(255,255,255,0.08); }

/* Toujours visible sur l'overlay */
body.overlay-open #lang-switcher {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   21. HINT DARK MODE (REBOND)
   ========================================= */
.dm-hint {
    position: fixed;
    bottom: 155px;
    left: 22px;
    background: linear-gradient(135deg, #4ac0e0, #6c5ce7);
    color: white;
    padding: 7px 13px;
    border-radius: 16px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(108,92,231,0.45);
    animation: dmBounce 1s ease-in-out infinite;
    z-index: 150;
    pointer-events: none;
    transition: opacity 0.4s ease;
    letter-spacing: 0.3px;
}

/* Petite flèche pointant vers le bouton Wii */
.dm-hint::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 44px;
    border: 5px solid transparent;
    border-top-color: #6c5ce7;
    border-bottom: none;
}

.dm-hint.dm-hint-hidden {
    opacity: 0;
    pointer-events: none;
    animation: none;
}

@keyframes dmBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}

/* Adaptation responsive */
@media (max-width: 768px) {
    .dm-hint { bottom: 125px; left: 10px; font-size: 0.7rem; padding: 6px 10px; }
    .dm-hint::after { left: 34px; }
}
@media (max-width: 480px) {
    .dm-hint { bottom: 112px; left: 8px; font-size: 0.65rem; padding: 5px 9px; }
}

/* =========================================
   22. CHAÎNE & OVERLAY RÉCOMPENSES
   ========================================= */

/* ── Carte dans la grille ── */
.awards-card-inner {
    background: #12100a !important;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
}
.awards-card-bg {
    object-fit: cover;
    opacity: 0.55;
}
.awards-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,8,2,0.85) 40%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}
.awards-trophy, .awards-card-label, .awards-count { position: relative; z-index: 2; }
.awards-trophy {
    font-size: 2.8rem;
    position: relative;
    z-index: 2;
    animation: trophyGlow 2s ease-in-out infinite;
}
.awards-card-label {
    color: #f1c40f !important;
    text-shadow: 0 0 10px rgba(241,196,15,0.5) !important;
    position: relative;
    z-index: 2;
    margin: 2px 0 !important;
}
.awards-count {
    font-size: 0.68rem;
    color: #665e30;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
}
@keyframes trophyGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(255,200,0,0.35); }
    50%       { text-shadow: 0 0 35px rgba(255,200,0,0.8), 0 0 55px rgba(255,150,0,0.3); }
}

/* ── Page overlay Récompenses ── */
.awards-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    background: #06070f;
    position: relative;
    padding-bottom: 24px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(241,196,15,0.2) transparent;
}

/* Fond étoilé CSS pur */
.awards-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1px 1px at 10%  15%, rgba(255,220,100,0.35) 0, transparent 100%),
        radial-gradient(1px 1px at 25%  40%, rgba(255,255,255,0.18) 0, transparent 100%),
        radial-gradient(1px 1px at 42%  8%,  rgba(255,220,100,0.28) 0, transparent 100%),
        radial-gradient(1px 1px at 60%  55%, rgba(255,255,255,0.14) 0, transparent 100%),
        radial-gradient(1px 1px at 75%  22%, rgba(255,220,100,0.22) 0, transparent 100%),
        radial-gradient(1px 1px at 88%  70%, rgba(255,255,255,0.16) 0, transparent 100%),
        radial-gradient(1px 1px at 5%   80%, rgba(255,255,255,0.12) 0, transparent 100%),
        radial-gradient(1px 1px at 50%  90%, rgba(255,220,100,0.2)  0, transparent 100%),
        radial-gradient(2px 2px at 33%  65%, rgba(255,220,100,0.15) 0, transparent 100%),
        radial-gradient(2px 2px at 80%  10%, rgba(255,220,100,0.18) 0, transparent 100%);
}

/* Marges latérales pour éviter le chevauchement avec les flèches de navigation (≈80px sur desktop) */
.award-hero-card  { margin: 0 90px 14px !important; }
.awards-bottom-row { margin: 0 90px !important; }

/* ── En-tête ── */
.awards-hero-header {
    text-align: center;
    padding: 28px 20px 18px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.awards-hero-trophy-wrap {
    display: inline-block;
    animation: trophyGlow 2.5s ease-in-out infinite;
    font-size: 3.2rem;
    margin-bottom: 6px;
    filter: drop-shadow(0 0 16px rgba(241,196,15,0.6));
}
.awards-hero-title {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 6px;
    color: #f1c40f;
    text-shadow: 0 0 30px rgba(241,196,15,0.45), 0 0 60px rgba(241,196,15,0.18);
    margin: 0;
    text-transform: uppercase;
}
.awards-hero-sub {
    font-size: 0.72rem;
    color: #44402a;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 7px 0 0;
}
.awards-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(241,196,15,0.4), transparent);
    margin: 12px auto 0;
}

/* ── Hero card (1er prix 2026) ── */
.award-hero-card {
    margin: 0 20px 14px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: white;
    display: flex;
    align-items: stretch;
    min-height: 150px;
    border: 1px solid rgba(241,196,15,0.22);
    background: #0c0a02;
    box-shadow: 0 0 0 0 rgba(241,196,15,0.1);
    animation: heroCardPulse 4s ease-in-out infinite;
    transition: transform 0.25s ease, border-color 0.25s ease;
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=40779'), pointer !important;
    z-index: 1;
    flex-shrink: 0;
}
.award-hero-card:hover {
    transform: translateY(-3px);
    border-color: rgba(241,196,15,0.55);
}
@keyframes heroCardPulse {
    0%,100% { box-shadow: 0 0 18px rgba(241,196,15,0.08), 0 6px 28px rgba(0,0,0,0.55); }
    50%      { box-shadow: 0 0 36px rgba(241,196,15,0.2),  0 6px 28px rgba(0,0,0,0.55); }
}

/* Image de fond de la hero card */
.award-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.18;
}
.award-hero-bg-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(6,7,15,0.96) 38%, rgba(6,7,15,0.5) 100%);
}

/* Barre gauche dorée */
.award-hero-bar {
    width: 4px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, #f1c40f, #e67e22);
    border-radius: 0;
    position: relative;
    z-index: 2;
}

/* Contenu texte */
.award-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    flex: 1;
    gap: 12px;
}
.award-hero-left { display: flex; flex-direction: column; gap: 7px; flex: 1; }

.award-rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    width: fit-content;
}
.pill-gold   { background: rgba(241,196,15,0.15); border: 1px solid rgba(241,196,15,0.45); color: #f1c40f; }
.pill-silver { background: rgba(192,192,192,0.1);  border: 1px solid rgba(192,192,192,0.3); color: #c0c0c0; }
.pill-bronze { background: rgba(205,127,50,0.12);  border: 1px solid rgba(205,127,50,0.4); color: #cd7f32; }

.award-hero-year-ghost {
    position: absolute;
    right: 54px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    font-weight: 900;
    color: rgba(241,196,15,0.07);
    font-family: 'Orbitron', monospace;
    letter-spacing: -2px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}
.award-hero-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: white;
    margin: 0;
    line-height: 1.2;
}
.award-hero-event {
    font-size: 0.78rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}
.award-self-tag {
    font-size: 0.74rem;
    color: #f1c40f;
    font-style: italic;
}
.award-hero-arrow {
    font-size: 1.3rem;
    color: rgba(241,196,15,0.3);
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
    z-index: 2;
    position: relative;
}
.award-hero-card:hover .award-hero-arrow {
    transform: translateX(4px);
    color: #f1c40f;
}

/* ── Ligne du bas : 2 cartes (2023 & 2021) ── */
.awards-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 20px;
    z-index: 1;
    position: relative;
    flex-shrink: 0;
}

.award-small-card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: white;
    height: 190px;
    display: block;
    border: 1px solid rgba(255,255,255,0.06);
    background: #0c0a02;
    transition: transform 0.25s ease, border-color 0.25s ease;
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=40779'), pointer !important;
}
.award-small-card:not(.award-no-link):hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.14);
}
.award-no-link { cursor: default !important; }

.award-small-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.28;
    transition: opacity 0.3s;
}
.award-small-card:not(.award-no-link):hover .award-small-img { opacity: 0.38; }

.award-small-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,7,15,0.97) 35%, rgba(6,7,15,0.35) 100%);
}

.award-small-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 3;
}
.bar-silver { background: linear-gradient(90deg, transparent, #c0c0c0, transparent); }
.bar-bronze { background: linear-gradient(90deg, transparent, #cd7f32, transparent); }

.award-small-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 14px 14px 16px;
    z-index: 2;
}
.award-small-year {
    font-size: 2.2rem;
    font-weight: 900;
    color: rgba(255,255,255,0.06);
    font-family: 'Orbitron', monospace;
    line-height: 1;
    margin-bottom: 6px;
}
.award-small-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: white;
    line-height: 1.3;
    margin: 5px 0 3px;
}
.award-small-event {
    font-size: 0.7rem;
    color: #555;
    line-height: 1.4;
}
.award-small-stat {
    font-size: 0.7rem;
    color: #cd7f32;
    font-weight: 600;
    margin-top: 2px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .awards-hero-header  { padding: 18px 16px 12px; }
    .awards-hero-title   { font-size: 1.5rem; letter-spacing: 4px; }
    .awards-hero-trophy-wrap { font-size: 2.4rem; }
    .award-hero-card     { margin: 0 52px 12px !important; min-height: 130px; }
    .award-hero-content  { padding: 14px 16px; }
    .award-hero-name     { font-size: 1.05rem; }
    .award-hero-year-ghost { font-size: 3rem; right: 44px; }
    .awards-bottom-row   { margin: 0 52px !important; gap: 10px; }
    .award-small-card    { height: 160px; }
    .award-small-year    { font-size: 1.7rem; }
    .award-small-name    { font-size: 0.78rem; }
}
@media (max-width: 480px) {
    .awards-hero-title   { font-size: 1.2rem; letter-spacing: 3px; }
    .award-hero-name     { font-size: 0.95rem; }
    .award-hero-year-ghost { display: none; }
    .award-hero-card     { margin: 0 46px 10px !important; }
    .awards-bottom-row   { margin: 0 46px !important; }
    .award-small-card    { height: 140px; }
    .award-small-name    { font-size: 0.72rem; }
    .award-small-event   { font-size: 0.64rem; }
}

/* =========================================
   CHAÎNE MÉTÉO
   ========================================= */

/* ── Carte dans la grille ── */
.meteo-card-inner {
    background: #0f2027 !important;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
}
.meteo-card-bg {
    object-fit: cover;
    opacity: 0.6;
}
.meteo-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,15,30,0.85) 40%, rgba(0,0,0,0.15) 100%);
    z-index: 1;
}
.meteo-card-icon {
    font-size: 2.4rem;
    position: relative;
    z-index: 2;
}
.meteo-card-label {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
    position: relative;
    z-index: 2;
}
.meteo-card-sub {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

/* ── Overlay ── */
.meteo-loading {
    font-size: 1.2rem;
    color: #aaa;
    text-align: center;
}
.meteo-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    background: rgba(0, 10, 20, 0.55);
    border-radius: 16px;
    backdrop-filter: blur(4px);
    width: 100%;
    max-width: 500px;
    padding: 20px;
    color: white;
}
.meteo-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.meteo-icon-big {
    font-size: 5rem;
    line-height: 1;
    filter: drop-shadow(0 0 20px rgba(126,207,234,0.6));
}
.meteo-temp-big {
    font-family: 'Orbitron', monospace;
    font-size: 3.5rem;
    color: #7ecfea;
    text-shadow: 0 0 20px rgba(126,207,234,0.4);
}
.meteo-desc {
    font-size: 1.1rem;
    color: #cce8f0;
    text-transform: capitalize;
}
.meteo-city {
    font-size: 0.9rem;
    color: #aaa;
    margin-top: 2px;
}
.meteo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}
.meteo-stat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(126,207,234,0.15);
    border-radius: 10px;
    padding: 12px 16px;
    text-align: center;
}
.meteo-stat-label {
    font-size: 0.7rem;
    color: #aaa;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.meteo-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #7ecfea;
}

.meteo-forecast {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
    border-top: 1px solid rgba(126,207,234,0.15);
    padding-top: 16px;
}

.meteo-forecast-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(126,207,234,0.1);
    border-radius: 8px;
    padding: 8px 4px;
}

.meteo-fc-name {
    font-size: 0.7rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.meteo-fc-icon { font-size: 1.4rem; }

.meteo-fc-temps {
    display: flex;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.meteo-fc-max { color: #7ecfea; }
.meteo-fc-min { color: #666; }
/* =========================================
   STATS CHANNEL — Card & Overlay
   ========================================= */
.stats-card-bars {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
    opacity: 0.5;
}

.stats-bar {
    width: 5px;
    background: linear-gradient(to top, #22d3ee, rgba(34,211,238,0.3));
    border-radius: 2px 2px 0 0;
    min-height: 3px;
}

/* Overlay preview bars */
.stats-preview-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 48px;
    margin-top: 16px;
    opacity: 0.6;
}

.spb {
    width: 10px;
    background: linear-gradient(to top, #22d3ee, rgba(34,211,238,0.2));
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    box-shadow: 0 0 6px rgba(34,211,238,0.4);
}

/* =========================================
   STAGE CHANNEL — Card pills
   ========================================= */
.stage-card-pills {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    white-space: nowrap;
}

.scp {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
}
.scp.refused  { background: rgba(248,113,113,0.18); color: #f87171; }
.scp.pending  { background: rgba(251,146,60,0.18);  color: #fb923c; }
.scp.accepted { background: rgba(74,222,128,0.18);  color: #4ade80; }