/***************************************************************************
                                  INDEX
****************************************************************************
FRONT
-----
**template:                             29
**listPostsView:                        127
**postView:                             305
**showPosts:                            424
**about:                                455
**404                                   497

USER
-----
**newUser:                               515
**editProfile:                           539
**addCommentView:                        583
**editCommentView:                       610

BACK
-----
**adminView:                             645
**showComments:                          754
**editPost:                              778

**RESPONSIVE:                            822

/***************************************************************************
                            FRONT : TEMPLATE
****************************************************************************/
/***************************** BARRE LOGO **********************************/
header
{
  background-color:rgba(0,0,0,0.5);
  box-shadow:0 4px 4px rgba(0,0,0,0.2);
  width:100%;
  position:absolute;
  top:0;
  z-index:1;
}
header nav
{
  padding:1em;
  position:relative;
}
header h1
{
  text-align:center;
  font-size:2.8vw;
  color:#29487d;
}
header h1 span
{
  display:none;
}
header div.rounded
{
  background-color:rgba(255,255,255,0.6);
  margin:0.5em;
  padding:0.5em;
}
header div.usercont
{
  position:absolute;
  right:2em;
  height:70%;
}
/************************** BOUTON LOGIN  **********************************/
header .login
{
  margin-top:2em;
  margin-bottom:1em;
}
header form .input-group
{
  margin-bottom:1em;
  margin-top:0;
}
header form .form-group
{
  width:100%;
  margin:0;
  margin-bottom:1em;
}
header form .button
{
  margin:0 auto;
}
header form .option
{
  border:none;
  cursor:pointer;
}
#overlay
{
  z-index:1;
}
.modal-backdrop.show
{
  z-index:0;
}
nav .user .usrOption
{
  border:none;
}
/****************************** FOOTER  ************************************/
footer .main
{
  min-height:5em;
  margin:0;
  padding:0;
}
footer .first
{
  margin:0 auto;
  padding:1em;
}
footer .links h5
{
  text-decoration:underline;
}
.foot:hover
{
  background-color:#191919;
}
/***************************************************************************
                        FRONT : LISTPOSTSVIEW
****************************************************************************/
/***************************** DERNIER POST ********************************/
#last
{
  height:60em;
  position:relative;
  margin:0;
  padding:0;
  width:100%;
  overflow:hidden;
}
.background
{
  background-image: url('../images/backalaska.png');
  width:100%;
  height:60em;
  position:absolute;
}
.coat
{
  height:60em;
  width:100%;
  background-color:rgba(255,255,255,0.2);
  position:absolute;
  top:0
}
.pic
{
  position:absolute;
  margin:0 auto;
  margin-top:5em;
  width:75%;
}
.pic .news
{
  border:1px solid #000;
  box-shadow:4px 4px 4px rgba(0,0,0,0.2);
  margin:1em auto;
  padding:0;
  overflow:hidden;
}
.pic .news .first
{
  padding:0;
  position:relative;
}
.pic .news .second
{
  height:100%;
  background-color:rgba(255,255,255,0.8);
  position:absolute;
  padding:2em 1.2em;
}
.pic .second div
{
  text-align:justify;
}
em.link.rounded
{
  background-color:#fff;
  box-shadow:2px 2px 1px #c0c0c0;
  padding:0.5em;
}
.pic .first img
{
  width:100%;
  max-height:49em;
  min-height:28em;
}

/****************************** BLUE BAR ***********************************/
#bar
{
  height:5em;
  margin:0;
}
#bar h3
{
  color:#1C3257;
}
#bar a
{
  text-decoration:underline;
  color:#fff;
}

/***************************** LISSEZ AUSSI ********************************/
#lissez
{
  border:1px solid #000;
  margin-top:5em;
  padding:0;
}
#lissez .second
{
  padding:0.5em;
}
#lissez .second .whole
{
  border:1px solid #000;
  padding:0.1em;
  margin:0.3em;
  overflow:hidden;
}
#lissez .whole .img
{
  padding:0;
  height:10em;
  overflow:hidden;
}
#lissez .whole img
{
  width:100%;
}
#lissez .whole .news
{
  margin:0 auto;
  z-index:5;
  height:10em;
  padding:0;
}
#lissez .news .first
{
  padding:0.5em;
  margin:0;
}
#lissez .news .first div:last-child
{
  text-align:right;
}

#lissez .news .second
{
  padding:0;
  margin:0;
}
#lissez .news .second div:first-child
{
  padding:0.5em;
  margin:0;
}
#lissez .news .second div:first-child p
{
  margin:0;
  text-align:justify;
}
#lissez .news .second div:last-child
{
  margin:0;
  height:7em;
}
#lissez .news .second div:last-child a
{
  color:#fff;
  text-decoration:none;
  border-radius:50%;
  width:30px;
  height:30px;
}
#lissez .news .second div:last-child a div
{
  margin:0;
  padding:0;
}
#lissez .news .second div:last-child a p
{
  text-align:center;
}

/*****************************  SHOWPOSTS ********************************/
#showPosts
{
  margin:1em auto;
  text-align:center;
}

/***************************************************************************
                          FRONT : POSTVIEW
****************************************************************************/
/************************* IMAGE ET BARRE NOIRE ****************************/
#myPost
{
  border:1px solid #000;
  margin:2em auto;
  margin-top:12em;
  padding:0;
  overflow:hidden;
}
#myPost div img
{
  width:100%;
}
#myPost div.bg-dark, #myPost div:last-child
{
  padding:1em;
}
#myPost div.bg-dark h3
{
  margin-left:1em;
  padding:0;
}
#myPost div.bg-dark em
{
  margin-right:1em;
  padding:0;
}

/************************** SANS COMMENTAIRES ******************************/
#noComs
{
  margin:2em auto;
  padding:0.1em;
}
#noComs p
{
  margin:1em auto;
  text-align:center;
}

/**************************** COMMENTAIRES *********************************/
.commentBox
{
  border:1px solid #007bff;
  margin:1em auto!important;
  padding:0;
}
.commentBox .author, .commentBox .userIds
{
  padding:0;
}
.commentAvatar
{
  text-align:center;
  margin-top:0.5em;
  padding:0!important;
}
.commentAvatar img
{
  width:4em;
  height:4em;
  border:1px solid #007bff;
  margin: 0 auto;
}
.author div:last-child p:first-child
{
  text-align:center;
  margin-bottom:0;
}
.author div:last-child p:last-child
{
  text-align:center;
}
.commentText .date p
{
  width:100%;
  text-align:right;
}
.commentText div:first-child
{
  padding:0.5em 1em;
}
.commentText .date-time
{
  text-align:right;
}
.commentText hr
{
  margin-bottom:0;
}
.commentText div:last-child
{
  padding:0.2em;
  min-height:3.5em;
}
.choix div
{
  padding:0;
  justify-content:right;
}
.modifer form, form.signaler
{
  padding:0;
}
button.modify, button.flag
{
  padding:0;
  border:none;
  cursor:pointer;
}
.offline p
{
  text-align:right;
  color:#007bff;
}

/***************************************************************************
                          FRONT : SHOWPOSTS
****************************************************************************/
#chapter
{
  margin-top:12em;
  margin-bottom:6em;
}
#chapter a
{
  text-decoration:none;
  color:#000;
  text-align:justify;
}
#chapter .post
{
  padding:0.5em;
}
#chapter .post:hover
{
  background-color:#c0c0c0;
}
#retour
{
  margin-bottom:6em;
}
#retour a
{
  text-decoration:underline;
}

/***************************************************************************
                              FRONT : ABOUT
****************************************************************************/
#forteroche
{
  margin:auto;
  margin-top:12em;
  padding:0;
}
#forteroche .img
{
  margin:0 auto;
  position:relative;
  padding:0;
  overflow:hidden;
}
#forteroche img
{
  margin:0 auto;
  padding:0;
  width:100%;
}
#forteroche .text
{
  position:absolute;
  top:0;
  right:15px;
  background-color:rgba(255,255,255,0.4);
  height:100%;
  width:50%;
  padding:0.8em;
}
#forteroche .subText
{
  text-align:justify;
}
#bspalaska
{
  margin:2em auto;
  text-align:justify;
  border:1px solid #000;
}
/***************************************************************************
                              FRONT : 404
****************************************************************************/
.container.notFound
{
  margin-top:10em;
  margin-bottom:2em;
  text-align:center;
}
.container.notFound h3
{
  font-size:5em;
  color:#007bff;
}
.container.notFound img
{
  width:100%
}
/***************************************************************************
                            USER : NEWUSER
****************************************************************************/
#newUser
{
  margin:2em auto;
  margin-top:12em;
  padding:2em;
}
#newUser form h2
{
  margin:0.5em auto;
  text-align:center;
}
#newUser .bg-danger
{
  margin-top:0.5em;
}
#newUser .bg-danger p
{
  margin:0.5em auto;
  text-align:center;
}

/***************************************************************************
                          USER : EDITPROFILE
****************************************************************************/
#editProfile
{
  margin:2em auto;
  margin-top:12em;
  padding:2em;
}
#editProfile form h2
{
  margin:0.5em auto;
  text-align:center;
}
#avatar
{
  width:15em;
  height:15em;
  border:2px solid #007bff;
  display:block;
  margin:0 auto;
}
#editProfile form .avatar input
{
  margin:0.2em auto;
}
#editProfile form .bg-danger
{
  margin-top:0.5em;
}
#editProfile form .bg-danger p
{
  margin:0.5em auto;
  text-align:center;
}
#backHome
{
  text-decoration:none;
}
#backHome div
{
  margin-top:1em!important;
}

/***************************************************************************
                          USER : ADDCOMMENTVIEW
****************************************************************************/
#userCom
{
  display:none;
}
#offline, #onLine
{
  margin:1em auto;
}
#offline .captchaDiv div:first-child
{
  margin:0.5em auto;
  width:305px;
}
#offline .captchaDiv .noCaptcha
{
  padding:1em;
  margin:0.5em auto;
}
.commentError
{
  text-align:center;
  margin-bottom:1em;
}

/***************************************************************************
                        USER : EDITCOMMENTVIEW
****************************************************************************/
.editComment
{
  border:1px solid #007bff;
  margin:1em auto;
  padding:0;
}
#change, .btn-danger.refuse
{
  border:none;
  padding:0.8em;
  margin-left:0.5em;
}
.commentText .choix button.effacer
{
  margin:0;
  border:none;
  cursor:pointer;
}
#effacer .modal-body
{
  min-height:3em;
  padding:1em;
}
#effacer .modal-footer
{
  justify-content:flex-end;
}
#deleteForm
{
  padding:0;
}

/***************************************************************************
                            BACK : ADMINVIEW
****************************************************************************/
/***************************  5 COMMENTAIRES *******************************/
.hidden
{
  display:none;
}
#adminH2
{
  text-align:center;
  text-decoration:underline;
  margin:1em auto;
  margin-top:5em;
}
#adminComments
{
  border:1px solid #000;
  margin:1em auto;
  padding:1em;
}
#adminComments div.tableau
{
  border:1px solid #000;
  padding:0;
  overflow:hidden;
}
.tdComment
{
  color:#007bff;
}
.trComment
{
  cursor:pointer;
}

/***********************  COMMENTAIRES SIGNALES ****************************/
#flagList
{
  border:1px solid #000;
  margin:1em auto;
  padding:1em;
}
#flagList .first
{
  border:1px solid #000;
  padding:0;
  overflow:hidden;
}
#flagList table.top tr td.top
{
  padding:0;
}
.thCenter
{
  text-align:center;
}
#flagIn
{
  min-height:2em;
  height:5em;
  overflow:auto;
  resize:vertical;
}
.tdComFlag
{
  color:#007bff;
  cursor:pointer;
  width:40%;
}

/**************************** EDITER UN POST *******************************/
#editAdmin
{
  border:1px solid #000;
  margin:1em auto;
  padding:1em;
}
#editAdmin form
{
  margin:0.5em auto;
}

/**************************** CREER UN POST ********************************/
#newPostAdmin
{
  margin:2em auto;
  border:1px solid #000;
  padding:1em;
}
#newPostAdmin form input
{
  margin-bottom:1em;
}
#newPostAdmin form div.images
{
  border:1px solid #c0c0c0;
  margin:1em auto;
  padding:0.5em;
}
#newPostAdmin form div.images div input
{
  margin:5px auto;
}
#newPostAdmin form button
{
  margin-top:1em;
}

/***************************************************************************
                          BACK : SHOWCOMMENTS
****************************************************************************/
#showComments
{
  margin-top:12em;
}
#showComments div.showComs
{
  border:1px solid #000;
  margin:1em auto;
  padding:1em;
}
#showComments .tousComs
{
  border:1px solid #000;
  padding:0;
  overflow:hidden;
}
#showComments .pointer
{
  cursor:pointer;
}

/***************************************************************************
                            BACK : EDITPOST
****************************************************************************/
/***************************  OPTIONS BAR **********************************/
#editPost
{
  margin:2em auto;
  margin-top:12em;
}
#editPost h5
{
  background-color:#f5f5f5;
  text-align:center;
}

/****************************** MAIN FORM **********************************/
#mainForm .title
{
  margin-bottom:1em;
}
#mainForm .imageFrame
{
  border:1px solid #c0c0c0;
  margin:1em auto;
  padding:0.5em;
}
#mainForm .imageFrame div
{
  margin:0 auto;
}
#mainForm .imageFrame div img
{
  width:100%;
  margin:0 auto 1em auto;
}
#mainForm .imageFrame .postImg
{
  margin:5px auto;
}
#mainForm button
{
  margin-top:1em;
}

/***************************************************************************
                              RESPONSIVE
****************************************************************************/
/************************** 993 - 1200 px *********************************/
@media screen and (min-width: 993px) and (max-width: 1200px)
{
  #last h4 b { font-size:0.7em; }
  #last .second span { font-size:8pt!important; }
  .editComment textarea { width:80%; }
  #flagCom, .tdComFlag { width:30%; }
  #flagPar { width:15%; }
  .tdDateFlag { width:20%; }
}
/************************** 576 - 992 px *********************************/
@media screen and (min-width: 576px) and (max-width: 992px)
{
  #last { height:45em; }
  #last h4 b { font-size:0.5em; }
  #last h6 em { font-size:0.5em; }
  #last .second span { font-size:6pt!important; }
  #last .pic {
    margin-top:4.5em;
    width:100%;
    padding:0;
  }
  #lissez .news .first { height:2.5em; }
  #lissez .news .first h5 { font-size:0.9em; }
  #lissez .first em { font-size:0.8em; }
  #lissez .whole .news { height:6em; }
  #lissez .whole .second {
    font-size:0.5em;
    height:4.5em;
  }
  #go { width:100%;font-size:2.2em; }
  #lissez .whole .second a div {
    font-size:1.5em;
    width:25px;
    height:25px;
  }
  #lissez .whole .second div:last-child {
    height:4.5em;
    padding:5px;
  }
  #lissez .whole .img { max-height:6em; }
  #myPost div.bg-dark h3 { font-size:1.6em; }
  .editComment textarea { width:calc(100% - 100px); }
  #flagCom, .tdComFlag { width:30%; }
  #flagPar { width:15%; }
  .tdDateFlag { width:20%; }
  #forteroche .text { padding:0; }
  #forteroche .subText{ font-size:0.55em; }
}
/************************** < 576 px *********************************/
@media screen and (max-width: 576px)
{
  header { padding-left:0!important;height:8em; }
  header nav a { padding:0; }
  header nav a div.rounded { margin:0; }
  header h1 { font-size:0.8em; }
  header h1 span {
    display:block;
    height:0.4em;
  }
  header div.usercont { right:0.3em; }
  nav .user button span, #seConnecter { display:none; }
  nav .user button:last-child { display:none; }
  nav .user .usrOption { display:block!important; }
  #last { height:38em; }
  .pic { margin-top:4em;width:100%; }
  #last h4 b { font-size:0.7em; }
  .pic .news .second { bottom:0;
    height:auto;
    width:105%;
    padding:2em;
  }
  #last .second span { font-size:8pt!important; }
  #bar h3 { font-size:1.5rem; }
  #lissez .whole .news { height:15em; }
  #lissez .news .first { height:4em; }
  #lissez .news .second .col-11 { height:13em; }
  #go { font-size:1.2em; }
  #lissez .news .second div:last-child { width:100%; }
  #lissez .news .second div:last-child {
    height:13em;
    padding:0;
  }
  #lissez .news .second div:last-child a div {
    border-radius:0;
    height:13em;
    text-align:center;
  }
  #lissez .news .first div h5 {
    font-size:1rem;
    width:100%!important;
  }
  #lissez .news .first div:last-child { font-size:0.9em; }
  #lissez .second { padding:0; }
  #lissez .second .img { display:none; }
  #lissez .whole .second { font-size:0.9em; }
  #myPost { margin-top:8em; }
  .commentBox { margin:1em 0!important;padding:0; }
  .commentText .date-time { text-align:center; }
  .editComment textarea {
    width:calc(100% - 100px);
    height:100%;
  }
  #userCom {
    display:block;
    height:0.4em;
  }
  #newUser {
    padding:0;
    margin-top:9em;
  }
  #newUser form button { margin-bottom:1em; }
  #optionsSession div:first-child {
    width:90%;
    margin:1em 5%;
  }
  #optionsSession form { width:100%; }
  #optionsSession textarea { width:100%; }
  #optionsSession h4 {
    font-size:1.3em;
    text-align:center;
  }
  .hidden{
    display:block;
    text-align:center;
  }
  #adminComments,#flagList { padding:0 }
  #flagCom, .tdComFlag { width:30%; }
  #flagPar { width:15%; }
  .tdDateFlag { width:20%; }
  #showComments h4 { font-size:1.4em; }
  #editPost h5 a { font-size:0.7em; }
  #forteroche .text {
    position:static;
    height:auto;
    width:auto;
    border:1px solid #000;
    border-radius:5px;
    margin:1em;
  }
  #bspalaska
  {
    margin:1em;
    margin-bottom:2em;
    padding-top:1em;
    width:95%;
  }
}
