/* Thème clair Tokusatsu - Dotclear custom CSS */

/* ---------------- Fonts ---------------- */
@font-face {
    font-family:'Linux Biolinum O';
    src:url('/polices/LinBiolinum_R') format('opentype');
    src:local('Linux Biolinum O');
}

@font-face {
    font-family:'Linux Biolinum O';
    font-style:italic;F
    src:url('/polices/LinBiolinum_RI.otf') format('opentype');
}

@font-face {F
    font-family:'Linux Biolinum O';
    font-weight:bold;
    src:url('/polices/LinBiolinum_RB.otf') format('opentype');
}

@font-face {
    font-family: 'Wahupop';
    src: url('/polices/和風ぽっぷ.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ---------------- Body ---------------- */
body {
    font-family: "Linux Biolinum O", sans-serif;
    background-color: #fff1d1;
    background-image: url('fond.png');
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
    background-attachment: scroll;
    margin: 0;
    min-height: 100vh;
    color: #262945;
    padding: 0;
}

/* ---------------- Layout ---------------- */
#page {
    max-width: 1000px;
    width: min(1000px, 90%);
    margin: 0 auto;
    padding: 1.5em;
    background-color: rgba(255, 247, 236, 0.8);
    box-shadow: 0 0 12px rgba(38,41,69,0.2);
    border-radius: 12px;
}

/* ---------------- Headers ---------------- */

h2,h3, h4 {
    font-family: "Linux Biolinum O", sans-serif;
    color: #354e93;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
    position: relative;
}


/* Centrer le titre du blog */
h1 {
    font-weight: 900;
    text-align: center;
    background: linear-gradient(135deg, #874351 0%, #d86c75 33%, #ff9e7c 66%, #ffd192 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-text-stroke: 1px #874351;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
    margin: 0;
}


h1 .japanese-font {
    font-size: 4rem;
    font-family: "Wahupop", sans-serif;
}

h1 .latin-font {
    font-size: 2rem;
    font-family: "Linux Biolinum O", sans-serif;
    font-weight: bold;
}

.post-title {
    font-family: "Wahupop", sans-serif;
    text-align: center;
    -webkit-text-stroke: 1px #072f62;
}

/* --- Style compact pour les tags --- */
ul.post-tags {
    display: inline;
    list-style: none;
    padding: 0;
    margin: 0.5em 0;
    line-height: 1.4;
}

ul.post-tags li {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Accent graphique Tokusatsu */
h1::before, h2::before {
    position: absolute;
    left: -20px;
    top: 0;
    width: 24px;
    height: 24px;

}
/* Ajoute un point après chaque élément SAUF le dernier */
ul.post-tags li:not(:last-child)::after {
    content: " • ";
    color: #5e625d;
    margin: 0 0.3em;
}

ul.post-tags a {
    color: #354e93;
    text-decoration: none;
    font-size: 0.9em;
    padding: 0.1em 0.3em;
    transition: color 0.3s ease;
}

ul.post-tags a:hover {
    color: #702f63;
    border-bottom: 1px solid #ff9e7c;
    background-color: rgba(255, 158, 124, 0.1);
    border-radius: 3px;
}

/* Pour la page individuelle d'article */
.post-info + ul.post-tags {
    margin-top: -0.3em;
    margin-bottom: 0.8em;
}

/* Version mobile */
@media (max-width: 768px) {
    ul.post-tags {
        margin: 0.4em 0;
    }
    
    ul.post-tags a {
        font-size: 0.85em;
    }
    
    ul.post-tags li:not(:last-child)::after {
        margin: 0 0.2em;
    }
}

/* ---------------- Links ---------------- */
a {
    color: #354e93;
    text-decoration: none;
    transition: 0.3s;
}
a:hover {
    color: #702f63;
    border-bottom-color: #ff9e7c;
}

/* ---------------- Navigation ---------------- */
#nav, .menu {
    display: flex;
    gap: 1em;
    justify-content: center;
    margin: 0 0 0.4em 0;
    padding: 0.5em 1em;
    background: #ede0d0;
    opacity: 0.8;
    border-radius: 8px;
}
/* Centre et réduit la marge de #navlinks (Aller au contenu | Aller au menu | Aller à la recherche) */
#navlinks {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6em;
    margin: 0 0 0.3em 0; 
    padding: 0;           
    font-size: 0.95rem;
    text-align: center;  
}

/* Liens à l'intérieur */
#navlinks a {
    margin: 0;
    padding: 0;
    color: #354e93;
    text-decoration: none;
}
#navlinks a:hover {
    color: #702f63;
    border-bottom: 1px solid #ff9e7c;
}

/* --- Centrer "Aller au contenu | Aller au menu | Aller à la recherche" --- */
#prelude {
    text-align: center;
     margin: 0 0 0.3em 0;
    font-size: 0.95rem;
}
#prelude a {
    margin: 0 0.5em;
    color: #354e93;
    text-decoration: none;
}
#prelude a:hover {
    color: #702f63;
    border-bottom: 1px solid #ff9e7c;
}

/* ---------------- Posts ---------------- */
.post {
    margin-bottom: 2.5em;
    padding: 1.5em;
    background: rgba(255, 241, 209, 0.8);
    border: 3px solid #c8a17b;
    border-radius: 10px;
    position: relative;
    text-align: justify; /* Justification du texte */
    flex: 1; /* S'étend pour avoir la même hauteur que la sidebar */
}

/* ---------------- Layout ---------------- */
#wrapper {
    display: flex;
    gap: 1em;
    margin: 1.5em 0;
    align-items: stretch; /* <-- aligne sidebar + post à la même hauteur */
}

#main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Empêche le débordement */
}

#content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

#sidebar {
    flex: 0 0 200px; /* Largeur fixe pour la sidebar */
    background-color: rgba(255, 247, 236, 0.8);
    padding: 0 1.2em 1.2em 1.2em;
    border-radius: 10px;
    border: 3px solid #c8a17b;
    align-self: flex-start; /* Aligne en haut */
    position: sticky;
    top: 20px; /* Reste visible au défilement */
}

/* ---------------- Responsive ---------------- */
@media (max-width: 768px) {
    #wrapper {
        flex-direction: column;F
    }
    
    #sidebar {
        flex: 0 0 auto;
        width: 100%;
        position: static;
    }
}F

/* Ajustements pour le contenu principal */
#content {
    width: 100%;
}

/* ---------------- Footer ---------------- */
#footer {
    text-align: center;
    font-size: 0.9em;
    border-radius: 8px;
    color: #5e625d;
}

/* ---------------- Buttons ---------------- */
button, .button {
    background: #ffdfcb;
    color: #262945;
    border: 2px solid #e16c75;
    padding: 0.5em 1em;
    border-radius: 8px;
    font-weight: bold;
    transition: 0.3s;
}
button:hover, .button:hover {
    background: #ff9e7c;
    color: #fff7ec;
}

/* ---------------- Special sci-fi accents ---------------- */
blockquote {
    border-left: 5px solid #7f83bf;
    padding-left: 1em;
    color: #33425e;
    background: #eef0cf;
    border-radius: 4px;
    font-style: italic;
}

/* ---------------- Responsive Mobile ---------------- */
@media (max-width: 768px) {
    #page {
        width: 95%;
        padding: 1em;
        margin: 0 auto;
    }
    
    #wrapper {
        flex-direction: column;
        gap: 1em;
    }
    
    #main {
        width: 100%;
        order: 1; /* Le contenu principal en premier */
    }
    
    #sidebar {
        flex: 0 0 auto;
        width: 100%;
        position: static;
        order: 2; /* La sidebar en second */
        margin-top: 1em;
        padding: 1em;
        border: 2px solid #c8a17b;
    }
    
    .post {
        padding: 1em;
        margin-bottom: 1em;
    }
    
    h1 .japanese-font {
        font-size: 3rem;
    }
    
    h1 .latin-font {
        font-size: 1.5rem;
    }
    
    #navlinks, #prelude {
        flex-direction: column;
        gap: 0.3em;
    }
    
    /* Ajustement des iframes pour mobile */
    iframe {
        max-width: 100%;
        height: auto;
        min-height: 200px;
    }
}

/* Pour les très petits écrans (smartphones) */
@media (max-width: 480px) {
    h1 .japanese-font {
        font-size: 2.5rem;
    }
    
    h1 .latin-font {
        font-size: 1.2rem;
    }
    
    .post-title {
        font-size: 1.5rem;
    }
    
    #sidebar {
        padding: 0.8em;
    }
    
    .widget h2 {
        font-size: 1.2rem;
    }
}

/* Centrer les iframes */
iframe {
    display: block;
    margin: 1em auto;
    max-width: 100%;
    border: 2px solid #c8a17b;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Pour les iframes spécifiques d'Archive.org */
iframe[src*="archive.org"] {
    background-color: #fff7ec;
}

/* Tabulation pour tous les paragraphes du contenu */
.post-content p {
    text-indent: 1.5em;
    margin-bottom: 0.8em;
}

/* Styles pour toutes les classes media */
.media,
.media-left,
.media-center {
    background-color: #fff7ec !important;
    padding: 5px !important;
    border: 2px solid #c8a17b !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}