/* ============================================================
   ORGANISATION DE L'OMBRE
   CSS spécifique au site

   commun.css doit être chargé AVANT ce fichier.
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

:root {
    --accent: rgb(15,30,120);
    --bg: rgba(35,95,175,1);
    --h2-color: rgb(56,45,95);

    --menu-w: 325px;
    --submenu-w: 433px;
}


/* ============================================================
   POLICES
   ============================================================

   Les fichiers existent également dans le dossier du site.
   Cette redéclaration permet au site de résoudre les polices
   localement, indépendamment de l'emplacement de commun.css.
   ============================================================ */

@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;
}


/* ============================================================
   CORRECTIONS GÉNÉRALES DU SITE
   ============================================================ */

html,
body {

    overflow-x: hidden;
}

body {
    margin: 0 auto;
    margin-top: 0;

    background-color: var(--bg);

    font-family: eurostile, sans-serif;
}


/* ============================================================
   IMAGES
   ============================================================ */

img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   TEXTE NORMAL
   ============================================================ */

/*
   IMPORTANT :
   Le commun.css possède un p générique historique :
       width:60%;
       padding:25px;
       background...
   
   Ici, le site Ombre utilise des paragraphes normaux.
   On annule donc explicitement ces propriétés.
*/

p:not(footer p):not(.footer p) {
    width: auto;
    max-width: none;

    padding: 5px;

    margin-top: 0;
    margin-bottom: 0;

    background: transparent;

    border-radius: 0;

    text-align: justify;

    font-family: eurostile, sans-serif;
}


/* ============================================================
   LIENS
   ============================================================ */

a {
    padding: 2px;
    font-size: 90%;

    color: rgba(172,190,220,1);

    background: rgb(15,30,120);
}


/* ============================================================
   GALERIE / MINIATURES
   ============================================================ */

#limite {
    max-width: none;
    width: 100%;
}

.actuel img,
#limite .actuel img,
#limite .actuel img:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

#limite img {
    filter: grayscale(60%);
    -webkit-filter: grayscale(60%);
    -moz-filter: grayscale(60%);
    -ms-filter: grayscale(60%);
    -o-filter: grayscale(60%);
}

#limite img:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}


/* ============================================================
   SOUS-MENU
   ============================================================ */

.sousmenu {
    border-top: 1px rgba(75,130,200,1) solid;
    font-size: 90%;
}

.titre {
    display: block;

    font-size: 14px;
    color: white;

    padding: 0;

    background: var(--accent);
}


/* ============================================================
   RETOUR / BAN / BONUS
   ============================================================ */

#retour a {
    background-color: rgba(75,130,200,1);
    color: black;
}

#ban a {
    color: rgb(75,130,200);
}

#bonus {
    background-color: rgba(235,267,169,0);
}


/* ============================================================
   DETAILS / SUMMARY
   ============================================================ */

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: rgba(0,100,180,0);

    padding: 4px;

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

    text-align: center;

    color: white;

    margin: 0 auto;

    border-radius: 20%;

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

    font-size: 17.2px;
}

summary:hover {
    background-color: rgba(0,100,180,0);
}


/* ============================================================
   TITRES
   ============================================================ */

h1,
h2,
h3,
h4,
summary {
    text-shadow: 1px 1px 2px black;

    color: white;

    font-weight: bold;

    font-family: eurostile;

    background: rgba(15,30,130,0.5);

    display: inline-block;

    text-align: center;

    padding: 12px;
}

h1 {
    text-transform: uppercase;
    font-size: 1.6em;
}

h2 {
    font-variant: small-caps;
    font-size: 1.4em;
}

h3,
summary {
    font-size: 1.2em;
}

h4 {
    font-size: 1em;
}

strong {
    padding: 4px;
}

em {
    font-family: josefin;
    font-style: normal;
    font-weight: bold;
    font-size: 105%;
    color: rgb(56,45,95);
}

#preambule {
    font-size: 95%;
}

.hidden {
    display: none;
}


/* ============================================================
   MODULE CHOIX
   ============================================================ */

#choix {
    text-align: center;
}

#choix img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

#choix img:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}

#choix a,
#choix a:hover,
#choix img,
#choix img:hover {
    background: rgba(190,211,158,0);
}


/* ============================================================
   BLOCS DE TEXTE
   ============================================================ */

.spoiler,
article {
    background: rgba(255,255,255,0.6);

    width: 80%;
    max-width: 100%;

    padding: 15px;

    border-radius: 30px;

    margin: 8px auto;
}

.nouvelle {
    background: rgba(255,255,255,0.6);

    width: 90%;
    max-width: 100%;

    padding: 15px;

    border-radius: 30px;

    margin: 8px auto;
}

.pics {
    background: rgba(255,255,255,0.6);

    text-align: center;

    padding-top: 10px;
    padding-bottom: 10px;

    margin-bottom: 20px;
}


/* ============================================================
   GÉNÉRIQUE
   ============================================================ */

#generique ul,
#generique li {
    text-align: justify;
    list-style: square;
}

#generique p {
    margin-top: 1px;
    margin-bottom: 1px;
}

#generique h2 {
    font-variant: small-caps;
    font-size: 1.6em;
    display: block;
}

#generique h3 {
    display: inline-block;
}


/* ============================================================
   CENTRAGE / ILLUSTRATIONS
   ============================================================ */

#centre {
    display: flex;
    justify-content: center;
    max-width: 100%;
}

.illu {
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
}

.illu img {
    max-width: 100%;
}

.center {
    text-align: center;
    margin: 0 auto;
}


/* ============================================================
   OBJETS
   ============================================================ */

.objets {
    display: flex;
    flex-direction: column;

    gap: 30px;

    margin-left: 30px;
    margin-right: 30px;

    max-width: calc(100% - 60px);
}

.objet-item {
    display: flex;
    align-items: center;

    gap: 20px;

    max-width: 100%;
}

.objet-item img {
    max-height: 420px;

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

    object-fit: contain;

    flex: 0 1 450px;
}

.objet-separator {
    width: 3px;

    background-color: rgba(15,30,120,0.7);

    align-self: stretch;

    min-height: 420px;
}

.objet-commentaire {
    flex: 1;

    min-width: 0;

    padding: 20px;

    border: 2px dashed rgba(15,30,120,0.8);

    border-radius: 15px;

    font-size: 20px;

    background-color: rgba(255,255,255,0.4);
}

.objet-commentaire p {
    padding: 5px;

    text-align: justify;

    margin: 0;

    line-height: 1.6;

    font-size: 20px;

    background: transparent;
}


/* ============================================================
   GALERIES
   ============================================================ */

.galerie {
    font-size: 0;
    position: relative;
    max-width: 100%;
}

.galerie,
.galerie2,
.scenes {
    font-size: 0;
}

.character-container {
    display: inline-block;
    position: relative;
    font-size: 0;
}

.character-label {
    position: absolute;

    bottom: 8px;
    right: 8px;

    font-family: josefin;

    font-style: normal;
    font-weight: bold;

    font-size: 22px;

    color: rgb(56,45,95);

    text-shadow:
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white,
        -2px  0    0 white,
         2px  0    0 white,
         0   -2px  0 white,
         0    2px  0 white;
}

.numero {
    font-family: josefin;

    font-style: normal;
    font-weight: bold;

    font-size: 22px;

    color: rgb(56,45,95);

    text-shadow:
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white,
        -2px  0    0 white,
         2px  0    0 white,
         0   -2px  0 white,
         0    2px  0 white;
}

.annonce,
.annonce p {
    text-align: center;

    font-size: 120%;
    font-weight: bold;

    margin: 0 auto;
}

.citations {
    font-style: oblique;
}

.note {
    background: rgba(255,255,255,0.6);

    margin: 0 auto 10px auto;

    width: 75%;
    max-width: 100%;

    padding: 6px;
}

.couv img {
    max-width: 750px;
}

.scene,
.couv2,
.decor {
    text-align: center;
    display: inline-block;
}

.scene img {
    max-height: 800px;
}

.decor img {
    max-height: 500px;
}

.galerie img,
.couv2 img {
    max-height: 600px;
}

.galerie,
.galerie2 {
    margin-bottom: 10px;
}

.scenes {
    margin-bottom: 30px;
}


/* ============================================================
   COMPATIBILITÉ AVEC LES ANCIENNES RÈGLES
   ============================================================ */

article a {
    font-size: 105%;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media only screen and (max-width: 700px) {

    /*
       Suppression explicite de toute largeur historique
       susceptible de fabriquer une page plus large que
       l'écran.
    */

    html,
    body {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;

        overflow-x: hidden;
    }

    /*
       Paragraphes :
       ils doivent occuper normalement la largeur de leur
       bloc parent, sans être réduits à 60 %.
    */

    p {
        width: auto;
        max-width: 100%;

        padding: 5px;

        background: transparent;
    }

    /*
       Le bloc de préambule conserve son aspect visuel,
       mais ne peut plus dépasser l'écran.
    */

    article,
    .spoiler {
        width: 80%;
        max-width: calc(100% - 16px);
    }

    .nouvelle {
        width: 90%;
        max-width: calc(100% - 16px);
    }

    /*
       Les galeries ne peuvent plus imposer une largeur
       supérieure au viewport.
    */

    .galerie,
    .galerie2,
    .scenes,
    #centre,
    .illu {
        max-width: 100%;
    }

    /*
       Objets : passage vertical sur petit écran.
    */

    .objets {
        max-width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
    }

    .objet-item {
        flex-direction: column;
        max-width: 100%;
    }

    .objet-item img {
        width: auto;
        max-width: 100%;
        flex: none;
    }

    .objet-separator {
        width: 100%;
        height: 3px;
        min-height: 3px;
    }

    .objet-commentaire {
        width: 100%;
        max-width: 100%;
    }

    /*
       Menu : UNE SEULE LIGNE.
    */

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

        width: 100%;
        max-width: 100%;

        overflow: visible;
    }

    #menu > li {
        float: none;

        flex: 1 1 0;
        min-width: 0;
    }

    #menu > li > a {
        width: 100%;
        max-width: 100%;

        white-space: nowrap;

        overflow: hidden;
    }

    /*
       Sous-menu : il peut évidemment s'étendre verticalement,
       puisqu'il ne fait pas partie de la ligne principale.
    */

    #menu li ul {
        width: 90vw;
        max-width: var(--submenu-w);
    }

    /*
       Summary historique de 750 px :
       on le limite à l'écran sans changer son aspect sur desktop.
    */

    summary {
        width: 750px;
        max-width: 100%;
    }

    details {
        max-width: 95%;
    }

    /*
       Éléments ayant historiquement une largeur fixe.
    */

    #jump,
    #texte,
    #ressources,
    #linear,
    #linear_bas,
    .logos {
        max-width: 100%;
    }

    #bonus1,
    #bonus2 {
        max-width: 100%;
    }

    #titre {
        max-width: 90%;
    }
}