@font-face { font-family: "Pacifica";src: url("/css/font/Pacifica.ttf");}
@font-face { font-family: "Segoi UI";src: url("/css/font/Segoe\ UI.ttf");}
* { border:0;margin:0;padding:0;}
body { background-color: var(--bg-site-color);display: flex;flex-direction: column;font-family: "Segoi UI", serif;color:white;}
header{height:var(--site-header-height);position:fixed;color:white;width: 100%;z-index:2;background-color: rgba(22, 22, 22, 1);}
section#header{width: var(--site-width);margin:auto;height: var(--site-header-height);position: relative;}
header::before{content:"";background-image: url('/imgs/grille.png');opacity:var(--site-header-opacity);height:var(--site-header-height);position:absolute;width: 100%;z-index: -10;}
#menu{font-size: 1.4em;font-family: "Segoi UI", serif;}
#menu > div{text-transform: capitalize;}
#menu > div::first-letter{color:var(--color-orange);}
#menu-mobile {display: none;}
#menu-mobile::after {font-family:"Font Awesome 5 Free";content:"\f0c9";font-weight: 900;}
#menu-mobile.open::after {font-family:"Font Awesome 5 Free";content:"\f00d";font-weight: 900;}
#panel-mobile {position:fixed;display:none;transition:0.5s;transform:translateX(-100%);width: 100%; height: 100%; top:var(--site-header-height); z-index: 80; background-color: var(--bg-site-color); padding:20px 0 0 10px; font-size: 2em;}
#panel-mobile.open{transform: translateX(0%);}
#panel-mobile-nav {display:flex;flex-direction: column; height:350px; justify-content: space-around;}
.nav-link{ padding: 5px; border-bottom: 1px solid white; background-color: var(--bg-site-color-with-opacity); width: calc(100% - 30px);}
#new-book{background-image: url('/imgs/bg2.webp');background-size:110%;width: 100%;min-height: calc(100%);background-attachment: fixed;background-position-y: -36px;background-position-x:-140px;top:0;padding-top:var(--site-header-height);position:relative;z-index: 0;}
#new-book-article {background-color: var(--bg-site-color-with-opacity); padding-top:25px;width: 100%;}
#new-book-article > .title {font-family: "Pacifica", serif;text-align: center;color:white;font-weight: normal;}
.new-book-action{align-self: end;}
.article-content {width: var(--site-width);margin:auto;}
.cover-livre > img {height: 250px;width: auto;}

.affiche-mobile{ display:none;height: 350px;width: var(--site-width); margin:auto auto 45px auto;position: relative;}
.affiche-mobile > .content-background{ position: absolute;overflow:hidden;width: 100%;height: 350px;}
.affiche-mobile > .content-background > .img{ background-image: url('/imgs/prop.jpg');height: 350px;width: 100%;background-size: cover;background-position-y: -70px;opacity: 0.8;}
.affiche-mobile > img{ position: absolute;max-width:230px;bottom: -25px;left: calc(50% - 115px);box-shadow: 0px 0px 0px 1px #EBEBEB  ;}

#citation {font-size: 40px;text-align: center;margin:20px auto 20px auto;width:var(--site-width);}
#citation > p:last-child {font-size: 1vw; text-align: right;}


#content {position: relative; width: 100%;background-color: var(--bg-site-color);z-index:1;}
#auteurs {display:flex;width: var(--site-width);margin:0 auto 20px auto;gap:5%;}
.auteur {position:relative;width: 100%;}
.auteur::before{content:"";position: absolute;background-color: var(--bg-site-color-with-opacity);width:100%;height:100%;clip-path: polygon(75px 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 75px);z-index: -10;}
.photo-auteur{position:relative;width:150px;height: 150px;margin:20px;}
.photo-auteur > img{width:100%;height: 100%;object-fit: cover;}
.cut-droite {clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 50px 100%, 0 calc(100% - 50px));}
.cut-droite-haut {clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%, 0 calc(100% - 50px));}
.cut-gauche-haut {clip-path: polygon(50px 0, 100% 0, 100% 0, 100% 100%, 0 100%, 0 50px);}
.cut-gauche {clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 50px 100%, 0 100%);}
#auteur-loki::before{transform: matrix(-1, 0, 0, 1, 0, 0);}
#auteur-fab{padding-right:30px;}
#auteur-loki{padding-left:30px;}
.auteur-info{width:80%;padding:10px;gap:10px;}
.auteur-info > .nom {font-size: 25px;}
.presentation{font-size: 1em;line-height: 1.2em;}

#points-clefs{width: var(--site-width);margin:auto;padding-top:40px;display: flex;flex-direction: row;justify-content: space-around;font-size: 5em;text-align: center;}
#points-clefs > .item {}
#points-clefs > .item > p {padding-top:10px;font-size: 1vw;}

#projet {margin-top:30px;text-align: justify;padding:10px;background-color: var(--color-orange);border-top:1px solid white;border-bottom:1px solid white;}
#projet > p {margin:auto;width:65%;padding-top:5px;}

.form-email{width:220px; margin-right:20px;}

input,.select-form {border-radius: 5px;padding:12px;vertical-align: top;}
input[type="checkbox"].error + label { border: 1px solid red;}
input:not([type='checkbox']).error {border: 3px solid red;}

#footer{bottom:20px;width: var(--site-width); text-align: center;left: calc(50% - (var(--site-width) / 2) );margin:auto;padding:20px;}
.txt {text-align: justify;}
.color-o{color:var(--color-orange);}
.color-green{color:var(--color-green);}
.fl-col{display:flex;flex-direction: column;}
.fl-row{display:flex;flex-direction: row;}
.fl-row-reverse{display:flex;flex-direction: row-reverse;}
.fl-irow{display:inline-flex;flex-wrap: wrap;}
.gap5{gap:5px;}.gap10{gap:10px;} .gap15{gap:15px;} .gap20{gap:20px;} .gap25{gap:25px;} .gap30{gap:30px;}
.fl-align-middle{align-items: center;}
.fl-align-end{align-items: flex-end;}
.fl-center{justify-content: center;text-align: center;}
.fl-sb{justify-content: space-between;}
.fl-fe{justify-content: flex-end;}
.pt20{padding-top: 20px;} .pt30{padding-top: 30px;}
.mt20{margin-top: 20px;}
.mb20{margin-bottom: 20px;}
.rotate-90{transform:rotate(-90deg);}
.btn {padding:10px 50px;border:1px solid white;border-radius: 5px;background-color: var(--bg-site-color); cursor: pointer;}
.btn-send {padding:10px 10px;border:1px solid white;border-radius: 5px;background-color: var(--bg-site-color);color:white;font-size: 1em;}
.hidden{display:none;}
.hr{width:100%;min-height: 50px;background:url('/imgs/bg-2.jpg') no-repeat fixed;background-size: cover;margin:15px auto;clip-path: polygon(50% 10%, 75% 50%, 100% 0, 100% 50%, 100% 100%, 50% 70%, 0 100%, 0 50%, 0 0, 25% 30%);}
a{text-decoration: none;color:white;text-align: center;}
.btn:hover{background-color: var(--bg-site-color-hover);}
.nop {padding: 0 !important;}
.mb20{margin-bottom: 20px;}

#content {padding-top:20px}
#content-page {display:flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;}
#login{margin:auto;border:1px solid white; border-radius:5px;display:flex;flex-direction: column;width: 400px;gap:15px;padding:10px;}
#message{margin:auto;border:1px solid white; border-radius:5px;display:flex;flex-direction: column;width: 400px;gap:15px;padding:10px;}
.btn-inscription, .btn-precommande{text-align: center;padding: 10px 15px;}
.btn-extrait{padding:10px 10px;font-size: 0.8em;}
.btn-action{padding:1px 5px;font-size: 0.8em;}
.btn-action:hover{background-color: var(--color-orange);}
label{font-size: 0.8em;}
#page-login{height: calc(100vh - 75px);display:flex;width:100%;}

#saga{width: var(--site-width);margin: 5px auto 20px auto;text-align: justify;}
.saga-box-titre{font-size: 2em;}
#saga-description{display: flex;flex-direction: row;justify-content: space-between;gap:30px;}
#saga-description > div > div{background-color: var(--bg-site-color-with-opacity);padding:10px 20px;}
#saga-description > div:nth-child(2) {margin-top: 15px;}
#saga-description > .fl-col{ width:200%;}
#univers {margin-bottom: 45px;}
#chroniques {margin-top: 45px;}

#livres{width: var(--site-width);margin:20px auto 20px auto;display: flex;flex-direction: column;gap:15px}
.livre{width:60%; margin:auto;background-color: var(--bg-site-color-with-opacity);display:flex;padding:10px;gap:10px;}
.livre > .couv {overflow: hidden;min-width:150px;max-width:150px;height: 250px; background-color: var(--bg-site-color-with-opacity);}
.livre > .couv > img {width:100%;height: auto;}
.livre > .infos {display:flex;flex-direction: column;width:100%;padding:0px 10px;gap:10px;}
.livre > .infos > .synopsis {margin: 10px 0 0 0;text-align: justify;line-height: 1.2em;}
.livre > .infos > .titre {font-size: 1.2em;}
.livre > .infos > .actions {text-align: right;display:flex;justify-content: flex-end;gap:10px;}
.blank{width:100%; background-color: var(--bg-site-color);min-height: 1em;margin:3px 0;}
.reverse{clip-path: polygon(0 0, 50% 22%, 100% 0, 100% 50%, 100% 100%, 75% 73%, 50% 100%, 25% 93%, 0 100%, 0 50%);}
#actualites {width: var(--site-width);margin:auto;}
.timeline {margin-top: 10px;}
.timeline ul {margin: 0;list-style: none;position: relative;padding: 1px 100px;color: #fff;}
.timeline ul:before {content: "";width: 1px;height: 100%;position: absolute;border-left: 2px dashed #fff;}
.timeline ul li {position: relative;margin-left: 30px;background-color: var(--bg-site-color-with-opacity);padding: 14px;width: 100%;}
.timeline ul li:not(:first-child) {margin-top: 60px;}
.timeline ul li > span {width: 2px;height: 100%;background: #fff;left: -30px;top: 0;position: absolute;}
.timeline ul li > span:before, .timeline ul li > span:after {content: "";width: 8px;height: 8px;border-radius: 50%;border: 2px solid #fff;position: absolute;background: #86b7e7;left: -5px;top: 0;}
.timeline ul li span:after {top: 100%;}
.timeline ul li > div {margin-left: 10px;}
.timeline div .title, .timeline div .type {font-weight: 600;}
.timeline div .info {font-weight: 300; text-align: justify;}
.timeline div > div {margin-top: 5px;}
.timeline span.number {height: 100%;}
.timeline span.number span {position: absolute;left: -95px;font-weight: bold;}
.timeline span.number span:first-child {top: 0;}
.timeline span.number span:last-child {top: 100%;}

.pt-header{padding-top: var(--site-header-height);}
#precommande{margin:auto;display: flex;gap:5px; justify-content: space-around;}
#precommande > .item {border:1px solid white; border-radius: 2px;flex-grow: 1;}
.item-img {height: 220px;overflow: hidden;}
.item-img > img {width:100%;height:auto}
.site-width {width: var(--site-width);margin:auto;}

.vibrate { 
        -webkit-animation: attention 0.3s linear 3 both;
                animation: attention 0.3s linear 3 both;
  }

 @-webkit-keyframes attention {
    0% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
    20% {
      -webkit-transform: translate(-2px, 2px);
              transform: translate(-2px, 2px);
    }
    40% {
      -webkit-transform: translate(-2px, -2px);
              transform: translate(-2px, -2px);
    }
    60% {
      -webkit-transform: translate(2px, 2px);
              transform: translate(2px, 2px);
    }
    80% {
      -webkit-transform: translate(2px, -2px);
              transform: translate(2px, -2px);
    }
    100% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
  }
  @keyframes attention {
    0% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
    20% {
      -webkit-transform: translate(-2px, 2px);
              transform: translate(-2px, 2px);
    }
    40% {
      -webkit-transform: translate(-2px, -2px);
              transform: translate(-2px, -2px);
    }
    60% {
      -webkit-transform: translate(2px, 2px);
              transform: translate(2px, 2px);
    }
    80% {
      -webkit-transform: translate(2px, -2px);
              transform: translate(2px, -2px);
    }
    100% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
  }
  

#precommande{gap:20px;flex-wrap: wrap-reverse;}
.item {background-color: var(--bg-site-color-with-opacity);width: 30%;padding:5px;display: flex;flex-direction: column;}
.item-ico {text-align: center;  font-size: 2em;}
.item-img {position: relative; text-align: center; color: white;}
.item-description {padding:10px;}
img + .item-title {position: absolute;bottom:0;text-align: center;line-height:50px;background-color:var(--bg-site-color-with-opacity);width:100%;}
#compte{ background-color: var(--bg-site-color-with-opacity);border-left:4px solid rgb(55, 84, 94); }
button{color: white;}
.item-actions{ margin:auto 5px 5px auto; align-items: center;width:100%;}
#list-objects{display: grid; gap: 10px; grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);}
#list-objects > .item {width:92%;}
#action-total{background-color: var(--bg-site-color-with-opacity);border-left:4px solid rgb(55, 84, 94); padding:10px; grid-area: panier; }
#preambule{margin:5px auto 5px auto;width:90%;text-align:justify;}
.item-panier{display:flex; flex-direction:row; justify-content: space-between;}
#list-panier {margin:5px auto 5px auto; width:80%;}
.separateur{border:1px solid white; width:100%;margin:10px auto 10px auto;}
#panier-action {width: 90%;margin:5px auto; text-align: right;}
.paiement-type > div:first-child:before{display: block;content:"\f111";font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;font-size:0.5em;}
.paiement-type.checked > div:first-child:before{display: block;content:"\f058";font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;font-size:0.5em;}
.paiement-type{display: flex;flex-direction: column;place-self: center; padding:5px;background-color: var(--bg-site-color-with-opacity);padding:10px;justify-self: stretch;}
#type-paiement{display:grid;gap:10px; grid-template-columns: calc((100% - 30px) /3) calc((100% - 30px) /3) calc((100% - 30px) /3);text-align: center;}
#type-paiement.error { border: 3px solid red;}
#utilisateur{display: grid;margin-top:20px;gap:40px;  grid-template-columns: calc((100% - 40px) /2) calc((100% - 40px) /2);}
#utilisateur-solo{display: grid;margin-top:20px;gap:40px;  grid-template-columns: 100%;}
#utilisateur > div { justify-self: stretch;padding:10px;}
#adresse {display:flex;justify-content: space-between;background-color: var(--bg-site-color-with-opacity);border-left:4px solid rgb(55, 84, 94);padding: 0px 15px;}
#adresse > .box-title {margin-left:50px;}
.box-body {display:flex;}
.form-pseudo-email{display: flex; gap:10px;}
.fgrow2{flex-grow: 2;} .fgrow1{flex-grow: 1;flex-shrink:1;} .fgrow0.5{flex-grow: 0.5;}
.gap2{gap:2px;}
.box-title{margin-bottom:15px;}
.mt5{margin-top: 5px;}
.form-item { display:flex;flex-direction: column; gap:2px;margin-top:5px;}
.form-pays-cp{display:flex;gap:10px;}
.mobile {display: none;}
#main_propre{display:none;}
#panier{position:sticky; top: calc(var(--site-header-height) + 15px);}
#formulaire_commande{display: grid;gap:20px; grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4); grid-template-areas: "formulaire formulaire formulaire panier";justify-items: stretch;}
#form-items{grid-area: formulaire; display: flex; flex-direction: column;}

#cgu > ul > li { margin-left: 20px; list-style-type: '┠';padding-left: 5px;}

#panier-cgu{font-size: 1.4em;}
#panier-cgu > input {width:20px;height: 38px;}
#panier-cgu > label > a {text-decoration: underline;}

.test{border:1px solid red;}
:root{ 
    --bg-site-color: #1e1e1e;
    --bg-site-color-with-opacity: rgba(22,22,22,0.7);
    --bg-site-color-hover: #1a0c04;
    --site-width: 95%;
    --color-orange: #BC4E2D;
    --color-green: rgb(47, 218, 67);
    --site-header-opacity: 0.4;
    --site-header-height: 100px;
}

@media only screen and (min-width: 1440px){
    #new-book-article > .title {font-size: 80px;}
    .text-livre > .titre { font-size: 25px;}
    .txt {text-align: justify;}
    :root{ 
        --site-width: 1440px;
    }
}

@media only screen and (max-width: 1440px){
    #new-book-article {padding-top:15px;}
    #new-book-article > .title {font-size:70px;margin-bottom: 10px;}
    #footer{margin:10px auto 10px auto;}
    #auteurs{gap: 5px;}
    .auteur{height:unset;}
    #new-book{background-size: auto;}
    .text-livre > .titre {font-size: 16px;}
    #citation {font-size: 3vw;}
    .auteur-info{gap:5px;}
    .txt {text-align: justify;font-size:14px;overflow: hidden;line-height: 17px;}
}

@media only screen and (max-width: 900px){
    #logo > a > img {height:40px;}
    #actualites > h2 {margin:auto;text-align: center;}
    #chroniques {margin-top: 0;}
    #univers {margin-bottom:0;}
    .livre {flex-direction: column;width:var(--site-width);}
    .livre > .couv {display: none;}
    .livre > .infos {width: var(--site-width);}
    .livre > .infos > .titre {text-align: center;}
    .affiche-mobile.no-img{height: 150px;margin: auto auto 25px auto;}
    .content-background.no-img{height: 150px;border:1px solid grey;background-color: #101010;}
    #saga-description{flex-direction: column;}
    #saga-description > .fl-col{ width:unset;}
    .mob-hidden{display:none;}
    #affiche-mobile,.affiche-mobile{ display:block;}
    #menu-mobile {display: block;font-size: 2em;}
    #menu {display: none;}
    #panel-mobile {display:block;}
    #logo > img {height:30px;width:auto;}
    #auteurs{flex-direction: column;}
    .auteur{height:unset;}
    #auteur-fab{padding-right:0px;}
    #auteur-loki{padding-left:0px;}
    #auteur-fab > .auteur-info{padding-right:15px;}
    #auteur-loki > .auteur-info{padding-left:15px;}
    #new-book{position:relative;height: unset;}
    .photo-auteur{height: 100px;}
    #citation {font-size: 5vw;margin:15px auto 15px auto}
    #citation > p:last-child {font-size: 3vw; text-align: right;}
    #new-book-article {padding-bottom:25px;}
    #new-book-article > .title {font-size: 8vw;}
    .text-livre > .titre {font-size: 21px;}
    .presentation{font-size: 14px;line-height: 17px;}
    .cover-livre {display: none;}
    .auteur-info{width:80%;padding:10px;}
    .new-book-action{text-align: center;padding-top:15px;}
    #menu{display: none;}
    #formulaire_commande{display: grid;gap:20px; width:100%; grid-template-columns: 100%; grid-template-areas: "formulaire" "panier";justify-items: stretch;}
    #list-objects{display: grid; gap: 10px; grid-template-columns: 100%;}
    #list-objects > .item{width: 100%;padding:0;}
    #type-paiement{display:grid;gap:10px; grid-template-columns: 100%;}
    #utilisateur{display: grid;margin-top:20px;gap:10px;  grid-template-columns: 100%;}
    #footer {padding:0;}
    #panier-action{text-align: left;}
    #panier-action > .btn {padding:10px 40px;}
    .mobile {display:block;}
    .box-body {display:flex;flex-direction: column;}
    #form-items:after {content: "";width:100%;min-height: 50px;background:url('/imgs/bg-2.jpg') no-repeat fixed;background-size: cover;margin:15px auto;clip-path: polygon(50% 10%, 75% 50%, 100% 0, 100% 50%, 100% 100%, 50% 70%, 0 100%, 0 50%, 0 0, 25% 30%);}
    :root{ 
        --site-header-height: 50px;
    }
}