/* =========================================================
   SITE BLEU CIEL / GRIS
   commun.css doit être chargé AVANT ce fichier
   ========================================================= */


/* ---------------------------------------------------------
   POLICES
   À conserver dans chaque thème
   --------------------------------------------------------- */

@font-face {
    font-family: 'DejaVuSans';
    src: url('DejaVuSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AA';
    src: url('Ace_Attorney.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AA_eu';
    src: url('ace_attorney_eu.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PW';
    src: url('Phoenix_Wright.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'times';
    src: url('times.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'eurostile';
    src: url('eurostile.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'im';
    src: url('im.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'josefin';
    src: url('josefin.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ---------------------------------------------------------
   VARIABLES DU THÈME
   --------------------------------------------------------- */

:root {
    --accent: #87CEEB;
    --bg: #d9e1e5;
    --h2-color: #4f5d66;

    --text: #28343b;
    --link: #3d6f85;
    --link-hover: #24576d;
}


/* ---------------------------------------------------------
   TEXTE GÉNÉRAL
   --------------------------------------------------------- */

body {
    color: var(--text);
    
}

menu { font-size: 130%; }


/* ---------------------------------------------------------
   LIENS
   --------------------------------------------------------- */

a {
    color: var(--link);
    background-color: var(--accent);
}

a:hover,
#ban a:hover {
    color: var(--link-hover);
}


/* ---------------------------------------------------------
   RETOUR
   --------------------------------------------------------- */

#retour a {
    background-color: var(--bg);
    color: var(--text);
}

#retour a:hover {
    color: #ffffff;
    background-color: #6fb9d6;
}


/* ---------------------------------------------------------
   BANDEAU
   --------------------------------------------------------- */

#ban a {
    color: var(--link);
}


/* ---------------------------------------------------------
   MENU
   --------------------------------------------------------- */



.menu,
.menu a,
.menu ul a {
    font-size: 13px;
}


/* ---------------------------------------------------------
   BLOCS DE CONTENU
   --------------------------------------------------------- */

#jump {
    background-color: #eef3f5;
}

#texte {
    background-color: rgba(238, 243, 245, 0.88);
}

.code {
    background-color: #eef3f5;
}

#ressources {
    background-color: #eef3f5;
}


/* ---------------------------------------------------------
   ÉLÉMENTS TEXTUELS
   --------------------------------------------------------- */

#soon {
    color: var(--text);
}

#causerie {
    color: var(--text);
}

strong {
    color: #315d70;
}


/* ---------------------------------------------------------
   DETAILS / SUMMARY
   --------------------------------------------------------- */


summary:hover {
    background-color: #9dcee2;
}

details {
    max-width: 70%;
    margin: 0 auto 10px auto;
}

details p {
    text-align: justify;
}

summary:focus,
audio:focus {
    outline: none;
}

summary {
    cursor: pointer;

    background-color: #b9dbea;
    color: #28343b;

    padding: 4px;

    width: 750px;
    max-width: 100%;

    text-align: center;

    color: black;

    margin: 0 auto;

    border-radius: 20%;

    border: rgb(41,54,88) 0px inset;

    font-size: 17.2px;
}



/* ---------------------------------------------------------
   BANDEAUX / DÉGRADÉS
   --------------------------------------------------------- */

#ban,
#ban2 {
    background-color: #87CEEB;
}

#linear {
    background-image: linear-gradient(
        #87CEEB,
        rgba(238, 243, 245, 0)
    );
}

#linear_bas {
    background-image: linear-gradient(
        rgba(238, 243, 245, 0),
        #87CEEB
    );
}


/* ---------------------------------------------------------
   BLOCS DE PRÉSENTATION
   --------------------------------------------------------- */

#contenu1,
#contenu2 {
    background: rgba(238, 243, 245, 0.78);
    border-left-color: #9aabb4;
    border-right-color: #b8c5cb;
}


/* ---------------------------------------------------------
   TITRES
   --------------------------------------------------------- */

h1 {
    background-color: #d4eaf2;
    color: #28343b;
}

h2 {
    color: #40515a;
    background-color: #b9dbea;
}


/* ---------------------------------------------------------
   NOTES
   --------------------------------------------------------- */

#note {
    background-color: #d4e5eb;
    border-color: #9aabb4;
    color: #34444d;
}


/* ---------------------------------------------------------
   PLAN / LANGUES
   --------------------------------------------------------- */

#eng {
    color: #647780;
}

em {
    color: #647780;
}


/* ---------------------------------------------------------
   BONUS
   --------------------------------------------------------- */

#bonus a:hover {
    color: var(--text);
}


/* ---------------------------------------------------------
   ÉLÉMENTS DIVERS
   --------------------------------------------------------- */

#soon {
    font-family: DejaVuSans;
}

#retour a {
    font-family: DejaVuSans;
}

#eng {
    font-family: josefin;
}

#plan {
    font-family: josefin;
}

em {
    font-family: josefin;
}


 
  
   /* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
/*
   Le commun.css applique probablement une couleur blanche
   au contenu du footer. On la surcharge explicitement ici.
*/
#ban2 footer,
#ban2 footer .footer,
#ban2 footer p,
#ban2 footer span,
#ban2 footer div {
    color: var(--text);
}
#ban2 footer a {
    color: var(--link);
    background-color: transparent;
}
#ban2 footer a:hover {
    color: var(--link-hover);
}
/* Le bouton "Retour" garde son traitement spécifique */
#ban2 #retour a {
    background-color: var(--bg);
    color: var(--text);
}
#ban2 #retour a:hover {
    background-color: var(--accent);
    color: #ffffff;
}
/* Le texte en italique du footer */
#ban2 footer em {
    color: #647780;
}

/* MENU : taille globale */
#menu,
#menu ul,
#menu > li > a,
#menu li ul a {
    font-size: 1.4rem !important;
    
}

/* =========================================================
   FICHES PERSONNAGES, SOMMAIRE ET TABLEAU DE TRADUCTION
   ========================================================= */

/* ---------------------------------------------------------
   SOMMAIRE / INDEX
   --------------------------------------------------------- */
.sommaire-container {
    background-color: #eef3f5;
    border: 1px solid #b8c5cb;
    border-radius: 1.5rem;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem auto 2rem auto;
    max-width: 90%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.sommaire-titre {
    font-family: 'im', 'eurostile', sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
    color: #315d70;
    text-align: center;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sommaire-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.8rem;
}

.sommaire-liste li a {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background-color: #b9dbea;
    color: var(--text);
    border-radius: 1rem;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.sommaire-liste li a:hover {
    background-color: var(--accent);
    color: #ffffff;
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   TITRES DE SECTION
   --------------------------------------------------------- */
.personnage-section-titre {
    display: block;
    text-align: center;
    margin: 2rem auto 1.5rem auto;
    color: #40515a;
    background-color: #b9dbea;
    border-radius: 13.75rem;
    font-family: 'im', 'eurostile', sans-serif;
    font-size: 1.5em;
    padding: 0.4rem 1rem;
    max-width: 85%;
}


/* ---------------------------------------------------------
   FICHES PERSONNAGES
   --------------------------------------------------------- */
.fiche-personnage {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: flex-start;
    background-color: rgba(238, 243, 245, 0.88);
    border: 1px solid #b8c5cb;
    border-radius: 1.5rem;
    padding: 1.5rem;
    margin: 1.5rem auto;
    max-width: 95%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    text-align: left;
}

.fiche-illu {
    flex: 0 0 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.fiche-illu img {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    display: block;
    background-color: #d4e5eb;
    padding: 0.3rem;
    border: 1px solid #9aabb4;
}

.fiche-illu.duo { flex-direction: column; gap: 10px; padding: 12px; }
.fiche-illu.duo img { max-height: 220px; width: 100%; object-fit: contain; }


.fiche-corps {
    flex: 1 1 auto;
    min-width: 0;
}

.fiche-nom {
    font-family: 'im', 'eurostile', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    color: #315d70;
    margin-bottom: 0.2rem;
}

.fiche-alias {
    font-size: 0.85rem;
    font-style: italic;
    color: #647780;
    margin-bottom: 0.8rem;
}

.fiche-description p {
    margin: 0 0 0.8rem 0;
    line-height: 1.5;
    text-align: justify;
    font-size: 0.95rem;
}

.fiche-description p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   AVIS DE RECHERCHE ET BLOCS D'INFORMATIONS (<dl>, Interpol)
   --------------------------------------------------------- */
.avis-recherche {
    background-color: #d4e5eb;
    border: 1px dashed #9aabb4;
    border-radius: 0.8rem;
    padding: 0.8rem 1rem;
    margin-top: 0.8rem;
    font-size: 0.85rem;
    color: #34444d;
}

.avis-recherche-titre {
    font-family: 'im', 'eurostile', sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #315d70;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #9aabb4;
    padding-bottom: 0.2rem;
}

.avis-recherche dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.8rem;
    margin: 0;
    padding: 0;
    align-items: baseline;
}

.avis-recherche dt {
    font-weight: bold;
    color: #315d70;
    text-align: right;
}

.avis-recherche dt::after {
    content: " :";
}

.avis-recherche dd {
    margin: 0;
    color: var(--text);
}

.motifs {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #9aabb4;
    line-height: 1.4;
    text-align: justify;
}

.motifs dt {
    display: inline;
    font-weight: bold;
    color: #315d70;
}

.motifs dt::after {
    content: "";
}


/* ---------------------------------------------------------
   TABLEAU DE TRADUCTION
   --------------------------------------------------------- */
.tableau-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 2rem auto;
    background-color: #eef3f5;
    border: 1px solid #b8c5cb;
    border-radius: 1rem;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tableau-traduction {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    text-align: left;
}

.tableau-traduction th,
.tableau-traduction td {
    padding: 0.61rem 0.9rem;
    border-bottom: 1px solid #b8c5cb;
}

.tableau-traduction th {
    background-color: #b9dbea;
    color: #315d70;
    font-family: 'im', 'eurostile', sans-serif;
    font-weight: bold;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tableau-traduction th:first-child {
    border-top-left-radius: 0.6rem;
}

.tableau-traduction th:last-child {
    border-top-right-radius: 0.6rem;
}

.tableau-traduction tbody tr:nth-child(even) {
    background-color: rgba(212, 229, 235, 0.45);
}

.tableau-traduction tbody tr:hover {
    background-color: #d4e5eb;
}

.tableau-traduction tbody tr:last-child td {
    border-bottom: none;
}


/* ---------------------------------------------------------
   ADAPTATION MOBILE / ÉCRANS ÉTROITS
   --------------------------------------------------------- */
@media only screen and (max-width: 650px) {
    .fiche-personnage {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1rem;
    }

    .fiche-illu {
        max-width: 140px;
        margin-bottom: 0.5rem;
    }

    .fiche-description p {
        text-align: left;
    }

    .avis-recherche dl {
        grid-template-columns: 1fr;
        gap: 0.2rem;
        text-align: left;
    }

    .avis-recherche dt {
        text-align: left;
        margin-top: 0.3rem;
    }

    .tableau-traduction th,
    .tableau-traduction td {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }
    
    .tableau-container {
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
        margin-left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
        overflow-x: auto;
    }
    
    
}

main { max-width: 88%; margin: 0 auto; text-align: justify; }

.fiche-description p { text-align: justify; }

.couv { text-align: center; margin: 0 auto; margin-bottom: 12px;}
.couv img { max-height: 600px; }

h3 { font-size: 110%; }

/* =========================================================
   CORRECTIF MENU — PC UNIQUEMENT
   Ne modifie PAS le comportement mobile existant.
   ========================================================= */

@media only screen and (min-width: 992px) {

    /* -----------------------------------------------------
       MENU PRINCIPAL
       ----------------------------------------------------- */

    #menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 15px auto 0 !important;
        padding: 0 !important;

        list-style: none !important;

        overflow: visible !important;
        white-space: normal !important;

        column-gap: 1.2rem !important;

        font-size: 1.4rem !important;
    }


    /* -----------------------------------------------------
       ÉLÉMENTS PRINCIPAUX
       ----------------------------------------------------- */

    #menu > li {
        position: relative !important;

        /*
         * Surtout pas flex: 1.
         * Chaque entrée garde sa largeur naturelle.
         */
        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* -----------------------------------------------------
       LIENS PRINCIPAUX
       ----------------------------------------------------- */

    #menu > li > a {
        display: block !important;

        width: auto !important;
        max-width: none !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0.35rem 0.5rem !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;

        font-size: 1.4rem !important;
    }


    /* -----------------------------------------------------
       UN SEUL "|"
       ----------------------------------------------------- */

    /*
     * Désactive le séparateur de ton CSS original.
     */
    #menu > li:not(:last-child)::after {
        content: none !important;
    }

    /*
     * Crée le SEUL séparateur, entre les deux éléments.
     */
    #menu > li + li::before {
        content: "|" !important;

        position: absolute !important;

        left: -0.6rem !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 1.4rem !important;
        line-height: 1 !important;

        color: inherit !important;

        pointer-events: none !important;
    }


    /* -----------------------------------------------------
       SOUS-MENUS — PC
       ----------------------------------------------------- */

    #menu li ul {
        position: absolute !important;

        top: 100% !important;

        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;

        width: max-content !important;
        min-width: 100% !important;
        max-width: 90vw !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;

        box-sizing: border-box !important;

        visibility: hidden !important;

        z-index: 1000 !important;

        background: var(--accent) !important;
    }


    #menu li:hover > ul,
    #menu li.sfhover > ul {
        visibility: visible !important;
    }


    #menu li ul a {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        box-sizing: border-box !important;

        padding: 0.4rem 0.8rem !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;

        font-size: 1rem !important;
    }


    /* -----------------------------------------------------
       SOUS-SOUS-MENUS
       ----------------------------------------------------- */

    #menu li ul ul {
        top: 0 !important;
        left: 100% !important;
        right: auto !important;

        transform: none !important;

        margin: 0 !important;

        min-width: 100% !important;
    }
}

@media (max-width: 900px) {
    .fiche-illu {
        flex: 0 0 160px;
    }

    .fiche-personnage.secondaire .fiche-illu {
        flex: 0 0 110px;
    }

    .fiche-corps {
        padding: 14px 16px;
    }

    .fiche-personnage.secondaire .fiche-corps {
        padding: 12px 14px;
    }

    .fiche-nom {
        font-size: 1.1em;
    }
}

@media (max-width: 600px) {
    .fiche-illu.duo {
        max-height: none;
        flex-direction: row;
        gap: 8px;
    }

    .fiche-illu.duo img {
        max-height: 200px;
        width: 50%;
    }

    .fiche-personnage,
    .fiche-personnage.secondaire {
        flex-direction: column;
        gap: 0;
    }

    .fiche-illu,
    .fiche-personnage.secondaire .fiche-illu {
        flex: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--bordure);
        padding: 14px;
        max-height: 220px;
    }

    .fiche-illu img {
        max-height: 180px;
    }

    .fiche-corps,
    .fiche-personnage.secondaire .fiche-corps {
        padding: 14px;
    }

    .fiche-nom {
        font-size: 1em;
    }

    .fiche-personnage.secondaire .fiche-nom {
        font-size: 1em;
    }

    .fiche-alias {
        font-size: 0.8em;
        margin-bottom: 10px;
    }

    .fiche-description {
        font-size: 0.85em;
    }
}