.wp-trollbook{
    width:min(1180px,calc(100% - 40px));
    margin:34px auto 60px;
    color:#111;
}

.wp-trollbook *{
    box-sizing:border-box;
}


/* HEADER */

.wp-trollbook-head{
    margin-bottom:18px;
}

.wp-trollbook-head h1{
    position:relative;
    margin:0 0 14px;
    padding-bottom:8px;

    font-size:1.65rem;
    line-height:1.2;
    font-weight:800;
    text-transform:uppercase;
}

.wp-trollbook-head h1::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;

    width:215px;
    height:2px;

    background:#CA161A;
}

.wp-trollbook-head p{
    margin:0;
    padding-left:14px;

    border-left:4px solid #CA161A;

    font-size:.98rem;
    line-height:1.55;
}


/* GRAND ACCORDEON VISUEL */

.wp-trollbook-visual{
    display:flex;

    width:100%;
    height:315px;

    margin:16px 0 18px;

    overflow:hidden;

    border:1px solid #aaa;

    background:#111;
}


/* PANNEAUX */

.wp-trollbook-panel{
    position:relative;

    flex:1 1 0;

    display:flex;
    align-items:flex-end;

    min-width:0;

    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;

    text-decoration:none;

    overflow:hidden;

    transition:flex .42s ease;
}

.wp-trollbook-panel::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,.15) 45%,
            rgba(0,0,0,.82) 100%
        );

    transition:background .3s ease;
}

.wp-trollbook-panel:hover{
    flex:3 1 0;
}

.wp-trollbook-panel:hover::before{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.08) 45%,
            rgba(0,0,0,.68) 100%
        );
}


/* TEXTE PANNEAUX */

.wp-trollbook-panel > div{
    position:relative;
    z-index:1;

    width:100%;

    padding:18px 20px;

    color:#fff;

    opacity:.92;

    transform:translateY(4px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.wp-trollbook-panel:hover > div{
    opacity:1;
    transform:none;
}

.wp-trollbook-panel h2{
    margin:0 0 5px;

    color:#fff;

    font-size:1.25rem;
    line-height:1.15;

    font-weight:800;
}

.wp-trollbook-panel p{
    margin:0;

    color:#fff;

    font-size:.88rem;
    line-height:1.3;
}


/* PANNEAU NON CLIQUABLE */

.wp-trollbook-panel-static{
    cursor:default;
}


/* ACCORDEONS TEXTE */

.wp-trollbook-accordions{
    margin-top:10px;
}

.wp-trollbook-details{
    margin:8px 0;

    overflow:hidden;

    border-radius:2px;

    box-shadow:0 2px 6px rgba(0,0,0,.28);
}


/* TITRE */

.wp-trollbook-details summary{
    position:relative;

    padding:12px 42px 12px 16px;

    list-style:none;

    cursor:pointer;

    background:#CA161A;

    color:#fff;

    font-size:.9rem;
    line-height:1.2;

    font-weight:700;

    transition:
        background .25s ease,
        color .25s ease;
}

.wp-trollbook-details summary::-webkit-details-marker{
    display:none;
}

.wp-trollbook-details summary::before{
    content:"›";

    display:inline-block;

    margin-right:8px;

    font-size:1.05rem;
    line-height:1;

    transition:transform .3s ease;
}

.wp-trollbook-details[open] summary::before{
    transform:rotate(90deg);
}

.wp-trollbook-details summary:hover{
    background:#ad1115;
}


/* CONTENU */

.wp-trollbook-answer{
    display:block;

    max-height:5000px;

    padding:18px 20px;

    background:#fff;

    color:#111;

    font-size:.93rem;
    line-height:1.6;

    overflow:hidden;

    transition:
        max-height .55s cubic-bezier(.4,0,.2,1),
        opacity .3s ease,
        padding .45s ease;
}

.wp-trollbook-details:not([open]) > .wp-trollbook-answer{
    max-height:0;

    opacity:0;

    padding-top:0;
    padding-bottom:0;
}

.wp-trollbook-details[open] > .wp-trollbook-answer{
    opacity:1;
}


/* CONTENU LONG */

.wp-trollbook-answer p{
    margin:0 0 14px;
}

.wp-trollbook-answer h2,
.wp-trollbook-answer h3{
    margin:20px 0 10px;

    color:#111;
}

.wp-trollbook-answer ul,
.wp-trollbook-answer ol{
    margin:12px 0 18px 22px;
}

.wp-trollbook-answer li{
    margin-bottom:7px;
}

.wp-trollbook-answer blockquote{
    margin:14px 0;

    padding:10px 14px;

    border-left:4px solid #CA161A;

    background:#f5f5f5;
}

.wp-trollbook-answer a{
    color:#CA161A;
    font-weight:700;
}


/* IMAGES DANS LES ACCORDEONS */

.wp-trollbook-answer img{
    display:block;

    max-width:100%;
    height:auto;

    margin:12px auto;
}


/* TABLETTE */

@media(max-width:900px){

    .wp-trollbook{
        width:92%;
    }

    .wp-trollbook-visual{
        height:270px;
    }

    .wp-trollbook-panel h2{
        font-size:1rem;
    }

    .wp-trollbook-panel p{
        font-size:.78rem;
    }
}


/* MOBILE */

@media(max-width:650px){

    .wp-trollbook{
        width:calc(100% - 20px);
        margin-top:24px;
    }

    .wp-trollbook-visual{
        flex-direction:column;

        height:auto;
    }

    .wp-trollbook-panel{
        flex:none;

        min-height:180px;
    }

    .wp-trollbook-panel:hover{
        flex:none;
    }

    .wp-trollbook-head h1{
        font-size:1.35rem;
    }

    .wp-trollbook-details summary{
        font-size:.84rem;
    }

    .wp-trollbook-answer{
        padding:16px;
        font-size:.88rem;
    }
}