/* comic-neue-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Comic Neue';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/comic-neue-v9-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    font-family: 'abadi-mt';
    src: url("../fonts/abadi-mt.ttf");
    font-style: normal;
    font-weight: 400;
}


* {
    box-sizing: border-box;
}


body {
    background-color: #F6F7EF;
    font-family: abadi-mt, sans-serif;
    font-size: 100%;
    line-height: 1.4;
    font-weight: 300;
    text-align: center;
}

h1, h2, h3, h4, h5, h6, .logo {
    font-family: "Comic Sans MS", sans-serif;
    font-weight: 400;
    z-index: 1;
    position: relative;
}


h1 {
    font-size: 4rem;
    font-weight: bold;
    color: #F3CA27;
    -webkit-text-stroke: 4px #170F05;
    margin-top: -60px;
}

h2 {
    font-size: 3rem;
    color: #F3CA27;
    -webkit-text-stroke: 3px #F6A0AC;
}

h3 {
    font-size: 2rem;
    color: #F6A0AC;
    -webkit-text-stroke: 2px #F3CA27;
}


.entete {
    max-width: 100%;
    height: auto;
}

/* -- Bloc intro avec nuages -- */
.intro-block {
    position: relative;
    max-width: 420px;
    margin: 0 auto 40px auto;
    padding: 20px 20px 20px 20px;
}

.decorP {
    background-color: #F3CA27;
    border-radius: 20px;
    border: 4px solid #F6A0AC;
    position: relative;
}


.intro-texte {

    border: none;
    padding: 16px 20px;
    margin: 0;
    text-align: left;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.nuages {
    width: 100%;
    position: relative;
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    margin: auto;
    pointer-events: none;
    z-index: 0;
}

.nuage_1 {
    width: 400px;
    position: absolute;
    top: -70px;
    right: -200px;
    opacity: 70%;
}

.nuage_2 {
    width: 600px;
    position: absolute;
    top: -100px;
    left: -300px;
    opacity: 50%;
}

.nuage_3 {
    width: 200px;
    position: absolute;
    top: 60px;
    right: -40px;
    opacity: 50%;
}

.barre {
    width: 350px;
    height: 10px;
    background-color: #DD727B;
    margin: -30px auto 10px auto;
}

main {
    text-align: center;
}

ul li {
    list-style: none;
}

main img {
    align-content: center;
    width: 400px;
    height: auto;
}

p {
    padding: 10px 20px;
    margin: 20px;
    text-align: left;
}


.imgP {
    background-color: #F3CA27;
    border-radius: 20px;
    border: 4px solid #F6A0AC;
    box-shadow: 5px 10px 20px red inset;
}

.centre {
    position: relative;
    box-shadow: inset 0 0 12px;
    border-radius: 50px;
    width: 300px;
    margin: auto;
    border: 5px solid #F6A0AC;
    overflow: hidden;
}


div img {
    display: block;
    width: 100%;
    height: auto;
}

#mattGro {
    position: relative;
    box-shadow: inset 0 0 12px;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: auto;
    border: 6px solid #DD5C3C;
    overflow: hidden;
}

#mattGro img {
    background-color: #f3ca27;
    width: 100%;
    border-radius: 50%;
}

.bordureImg {
    border: 4px solid #DD727B;
}

footer {
    padding: 20px;
}


footer ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
}

footer ul li {
    flex-flow: row wrap;
    padding: 10px;
}

footer ul li img {
    width: 120px;
    height: auto;
}

.facebook {
    width: 80px;
    height: auto;
}

/*------------------------------------------------------------------------------------------*/
/*----------------------------------Episodes------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/
.mainEpisodes .nuages {
    width: 100%;
    position: relative;
    margin: auto;
    pointer-events: none;
    z-index: 0;
}

.mainEpisodes .nuage_1 {
    width: 300px;
    position: absolute;
    top: -70px;
    right: -200px;
    opacity: 70%;
}

.mainEpisodes .nuage_2 {
    width: 500px;
    position: absolute;
    top: -50px;
    left: -350px;
    opacity: 50%;
}

.mainEpisodes .nuage_3 {
    width: 250px;
    position: absolute;
    top: 60px;
    right: -200px;
    opacity: 80%;
}

.mainEpisodes .nuage_4 {
    width: 300px;
    position: absolute;
    top: 800px;
    left: -250px;
}

.mainEpisodes .nuage_5 {
    width: 300px;
    position: absolute;
    top: 2000px;
    left: -200px;
}
.mainEpisodes .nuage_6 {
    width: 300px;
    position: absolute;
    top: 1000px;
    right: -200px;
}

.mainEpisodes p, .mainEpisodes img {
    position: relative;
    z-index: 1;
}

table {
    border-collapse: collapse;
    border: 5px #08B3E9 solid;
    width: 90%;
    margin: auto;
}

th, td {
    border: 2px solid #08B3E9;
    padding: 10px;
    vertical-align: top;
}

th {
    background-color: #F3CA27;
    color: #08B3E9;
    text-align: center;
}

td {
    background-color: #F3CA27;
    text-align: left;
}

/*------------------------------------------------------------------------------------------*/
/*--------------------------------Page Liens------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/

.mainLiens h1 {
    margin: 50px;
}

.mainLiens .nuage_1 {
    width: 300px;
    position: absolute;
    top: -70px;
    right: -200px;
    opacity: 70%;
}

.mainLiens .nuage_2 {
    width: 500px;
    position: absolute;
    top: -50px;
    left: -350px;
    opacity: 50%;
}

.mainLiens .nuage_3 {
    width: 250px;
    position: absolute;
    top: 60px;
    right: -200px;
    opacity: 80%;
}

.mainLiens .nuage_4 {
    width: 300px;
    position: absolute;
    top: 400px;
    left: -200px;
}

.mainLiens a {
    color: black;
    font-size: 1.2rem;
    text-decoration: none;
}

.mainLiens a:hover {
    color: #F3CA27;
    border: 1px solid #DD727B;
}


/*------------------------------------------------------------------------------------------*/
/*--------------------------------Produits et médias dérivés--------------------------------*/
/*------------------------------------------------------------------------------------------*/

.mainProd ul img {
    width: 200px;
    height: auto;
}

.mainProd ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 0;
}

.mainProd ul li {
    width: 50%;
}

/* --- Figurines : 2 colonnes côte à côte avec nom sous l'image --- */
.figurines2col {
    display: flex !important;
    justify-content: center !important;
    gap: 20px;
    padding: 10px !important;
}

.figurines2col li {
    width: auto !important;
    flex: 1;
    max-width: 45%;
}

.figurines2col figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.figurines2col figure img {
    width: 100% !important;
    max-width: 160px;
    height: 200px;
    object-fit: contain;
}

.figurines2col figcaption {
    font-size: 0.9rem;
    text-align: center;
    color: #170F05;
}

/* --- Vêtements : grille 2x2 --- */
.grille2x2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 10px !important;
    width: 100% !important;
    max-width: 420px;
    margin: 0 auto !important;
}

.grille2x2 li {
    width: 100% !important;
    overflow: hidden;
    border-radius: 8px;
}

.grille2x2 li img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover;
    display: block;
}
/*------------------------------------------------------------------------------------------*/
/*--------------------------------Personnages-----------------------------------------------*/
/*------------------------------------------------------------------------------------------*/

.persos h3, .persos2 h3 {
    font-size: 2rem;
    font-weight: bold;
    color: #F3CA27;
    -webkit-text-stroke: 2px #170F05;
}

.persos, .persos2 {
    background: linear-gradient(-38deg, #08B3E9 0%, #00AEEA 100%);
}

/* -------- STRUCTURE -------- */

.persoBack {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
}

.persoBack figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 500px;
    position: relative;
}

/* -------- IMAGE -------- */

.persoBack figure img {
    width: 300px;
    max-width: 90%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2; /* devant les nuages */
}

.persoBack figure .imgGrand {
    width: 380px;
}
/* -------- TEXTE PERSO (mobile) -------- */

.persoBack figure .texte-perso {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 500px;
    padding: 0 10px;
    position: relative;
    z-index: 2;
}

.persoBack figure .texte-perso h3 {
    font-size: 2rem;
    color: #F6A0AC;
    -webkit-text-stroke: 2px #F3CA27;
    margin: 10px 0;
}

.persoBack figure .texte-perso p {
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    padding: 10px 0;
    margin: 0;
}


/* -------- NUAGES (ISOLÉS AUX PERSOS) -------- */

.persoBack .nuages {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

.persoBack .nuage_1,
.persoBack .nuage_2,
.persoBack .nuage_3 {
    position: absolute;
    width: 250px;
}

/* -------- POSITION PAR DÉFAUT -------- */

.persoBack .nuage_1 {
    top: 400px;
    right: -60px;
}

.persoBack .nuage_2 {
    top: 250px;
    left: -80px;
}

.persoBack .nuage_3 {
    top: 80px;
    right: -190px;
}

/* -------- COULEURS -------- */

.HomerBack {
    background: linear-gradient(-38deg, #08B3E9 0%, #00AEEA 100%);
}

.MargeBack {
    background: linear-gradient(10deg, #5794b8 29%, #08B3E9 60%);
}

.BartBack {
    background: linear-gradient(22deg, #DD727B 20%, #DD5C3C 50%);
}

.LisaBack {
    background: linear-gradient(28deg, #DD727B 10%, #DD727B 70%);
}

.MaggieBack {
    background: linear-gradient(27deg, #A42868 27%, #DD727B 70%);
}

/* -------- AJUSTEMENTS PAR PERSONNAGE -------- */

/* ---------------- HOMER ---------------- */

.HomerBack .nuage_1 {
    top: 420px;
    right: -50px;
    opacity: 80%;
}

.HomerBack .nuage_2 {
    top: 260px;
    left: -70px;
    opacity: 80%;
}


/* ---------------- MARGE ---------------- */

.MargeBack .nuage_1 {
    width: 600px;
    top: 400px;
    left: -80px;
}

.MargeBack .nuage_2 {
    width: 800px;
    top: 100px;
    left: -80px;
    opacity: 80%;
}

.MargeBack .nuage_3 {
    top: 300px;
    right: -120px;
    width: 300px;
}


/* ---------------- BART ---------------- */

.BartBack .nuage_1 {
    width: 500px;
    top: 350px;
    right: -300px;
    opacity: 80%;
}

.BartBack .nuage_2 {
    width: 500px;
    top: 150px;
    left: -90px;
    opacity: 80%;
}



/* ---------------- LISA ---------------- */

.LisaBack .nuage_1 {
    width: 500px;
    top: 360px;
    left: -100px;
    opacity: 80%;
}

.LisaBack .nuage_2 {
    width: 500px;
    top: 100px;
    left: -80px;
    opacity: 80%;
}

.LisaBack .nuage_3 {
    width: 500px;
    top: 300px;
    right: -300px;

}


/* ---------------- MAGGIE ---------------- */

.MaggieBack .nuage_1 {
    width: 500px;
    top: 300px;
    right: -300px;
    opacity: 80%;
}

.MaggieBack .nuage_2 {
    width: 500px;
    top: 120px;
    left: -100px;
    opacity: 80%;
}




/* ---------------- BURNS ---------------- */

.BurnsBack .nuage_1 {
    width: 350px;
    top: 420px;
    right: -200px;
    opacity: 80%;
}

.BurnsBack .nuage_2 {
    width: 500px;
    top: 150px;
    left: -100px;
    opacity: 80%;
}



/* ---------------- MOE ---------------- */

.MoeBack .nuage_1 {
    width: 350px;
    top: 390px;
    right: -200px;
    opacity: 80%;
}

.MoeBack .nuage_2 {
    width: 500px;
    top: 200px;
    left: -100px;
    opacity: 80%;
}


/* ---------------- NED ---------------- */

.NedBack .nuage_1 {
    width: 500px;
    top: 400px;
    right: -250px;
    opacity: 80%;
}

.NedBack .nuage_2 {
    width: 500px;
    top: 200px;
    left: -60px;
    opacity: 80%;
}


/* ---------------- KRUSTY ---------------- */

.KrustyBack .nuage_1 {
    width: 350px;
    top: 300px;
    right: -150px;
    opacity: 80%;
}

.KrustyBack .nuage_2 {
    width: 500px;
    top: 300px;
    left: -80px;
    opacity: 80%;
}


/* ---------------- BOB ---------------- */

.BobBack .nuage_1 {
    width: 350px;
    top: 410px;
    right: -100px;
    opacity: 80%;
}

.BobBack .nuage_2 {
    width: 500px;
    top: 260px;
    left: -90px;
    opacity: 80%;
}


/* ---------------- MILHOUSE ---------------- */

.MilBack .nuage_1 {
    width: 350px;
    top: 340px;
    right: -180px;
    opacity: 80%;
}

.MilBack .nuage_2 {
    width: 500px;
    top: 180px;
    left: -80px;
    opacity: 80%;
}


/* ---------------- NELSON ---------------- */

.NelsonBack .nuage_1 {
    width: 350px;
    top: 350px;
    right: -100px;
    opacity: 80%;
}

.NelsonBack .nuage_2 {
    width: 500px;
    top: 100px;
    left: -80px;
    opacity: 80%;
}

/* -------- TEXTE DEVANT -------- */

.persos p, .persos2 img {
    position: relative;
    z-index: 1;
}

.persos footer {
    /*background: linear-gradient(27deg, #A42868 2%, #DD727B 100%);*/
    background-color: #A42868;
}
/*------------------------------------------------------------------------------------------*/
/*-----------------------------------Boutons------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/



/*-----Bouton suivant------*/
.btn-suivant {
    background-color: #f4c21f; /* jaune */
    color: #a0005a; /* texte rose/violet */
    border: 4px solid #e06c86; /* bordure rose */
    padding: 15px 50px;
    font-size: 20px;
    border-radius: 50px; /* effet pilule */
    cursor: pointer;

    /* Ombre */
    box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.2);

    transition: all 0.2s ease;
}

/* Effet au survol */
.btn-suivant:hover {
    transform: translateY(-2px);
    box-shadow: 6px 10px 12px rgba(0, 0, 0, 0.25);
}

/* Effet clic */
.btn-suivant:active {
    transform: translateY(2px);
    box-shadow: 3px 5px 6px rgba(0, 0, 0, 0.2);
}
.mainEpisodes footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.btn-suivant {
    text-decoration: none;
    display: inline-block;
}

/*-----Bouton retour-----*/
.episode2 header, .persos2 header {
    display: flex;
    align-items: center;
    padding: 20px;
}

.btn-retour {
    display: inline-block;
    background-color: #f4c21f; /* jaune */
    color: #a0005a; /* couleur flèche */
    border: 4px solid #e06c86; /* contour rose */
    padding: 10px 25px;
    font-size: 20px;
    border-radius: 50px;
    text-decoration: none;

    /* Ombre */
    box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.2);

    transition: all 0.2s ease;
}

/* Hover */
.btn-retour:hover {
    transform: translateY(-2px);
    box-shadow: 6px 8px 10px rgba(0, 0, 0, 0.25);
}

/* Click */
.btn-retour:active {
    transform: translateY(2px);
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
}



.famsimpson {
    width: 250px;
    height: auto;
    margin-bottom: -40px;
    position: relative;
    z-index: 0;
}
.episode2 footer {
    bottom: 0;
}

.footer-episodes {
    position: relative;
    padding: 20px;
    overflow: visible;
    min-height: 320px;
}

.footer-episodes .famsimpson {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200px;
    height: auto;
    margin-bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.footer-episodes ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    list-style: none;
    padding: 40px 0 0 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

.footer-episodes ul li {
    padding: 0;
}

.footer-episodes ul li img {
    width: 60px;
    height: auto;
}