a {
    font-stretch: expanded;
    font-family: verdana, arial, helvetica, sans-serif;
    text-decoration: none;
}

body {
    background-image: url("/bbs/style/background/tile-2.png");
    background-repeat: repeat;
    background-size: auto; /* Laisse l'image à sa taille d'origine, ou ajuste selon tes besoins */
    background-attachment: scroll;
}


/********************************************/
/* Mobile vs Desktop                        */
/********************************************/




/********************************************/
/* 🤖 2024/05 Activer une fiche en PNJ      */
/********************************************/

body.pnj {
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  background-size: 1400% 1400%;
  animation: rainbowBackground 10s linear infinite;
}

@keyframes rainbowBackground {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}



/********************************************/
/* Les font en premier... c'est comme ça !   */
/*********************************************/


.boutton {
font-size: 80%;
color: white;
background: #eaaf67;
font-weight: bold;
border: solid;
border-color: #ddd width=200px;
padding: 0.2em .6em;
}

.btn {
    min-width: 85px; /* Largeur minimale */
    padding: 3px 10px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease;
}



form.boutton {
font-size: 80%;
color: white;
background: #eaaf67;
font-weight: bold;
border: solid;
border-color: #ddd;
padding: 0.2em .6em;
}

.hibutton {
font-size: 80%;
color: white;
background: #FF2000;
font-weight: bold;
border: solid;
border-color: #FFB0B0;
padding: 0.2em .6em;
}

/* emoji avec twemoji */

img.emoji {
   height: 1.2em;
   width: 1.2em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}

/* Titrage (à harmoniser partout car c'est nimportnawak */

/*
h1 { color: #111111; }    
h2 { color: #222222; }    
h3 { color: #333333; }    
h4 { color: #444444; }    
h5 { color: #555555; }    
*/
    
h1 { font-size: 16px; font-weight: bold; }    
h2 { font-size: 15px; font-weight: bold; }    
h3 { font-size: 14px; font-weight: bold; }     
h4 { font-size: 13px; font-weight: bold; }    
h5 { font-size: 12px; font-weight: bold; }   

h1 { padding: 0px; margin: 0px; margin-top: 16px; margin-bottom: 3px;}    
h2 { padding: 0px; margin: 0px; margin-top: 14px; margin-bottom: 3px;}     
h3 { padding: 0px; margin: 0px; margin-top: 12px; margin-bottom: 3px;}       
h4 { padding: 0px; margin: 0px; margin-top: 12px; margin-bottom: 3px;}        
h5 { padding: 0px; margin: 0px; margin-top:  6px; margin-bottom: 3px;}    


hr {
    color: #fafafa;
}

.emoji1 { font-size: 12px;  font-style: normal; }    
.emoji2 { font-size: 14px;  font-style: normal; }    
.emoji3 { font-size: 16px;  font-style: normal; }    
.emoji4 { font-size: 18px;  font-style: normal; }    
.emoji5 { font-size: 20px;  font-style: normal; }    
.emoji6 { font-size: 22px;  font-style: normal; }    
.emoji7 { font-size: 24px;  font-style: normal; }    
.emoji8 { font-size: 26px;  font-style: normal; }    
.emoji9 { font-size: 28px;  font-style: normal; }    

.corner {
    border-radius: 5px; 

}    

/*******************************/ 
/* Cas spécial (body)          */
/*******************************/

.invisible {
  background: #000000;
}


/*******************************/ 
/* Common CSS tool              */
/*******************************/

.alignleft {
  float: left;
  width:  40%;
  text-align:left;
}

.aligncenter {
  float: left;
  width:20.%;
  text-align:center;
}

.alignright {
 float: right;
 width: 30%;
 text-align:right;
}

.clearFloat {
  clear: both;
}

.hidden {
    display: none;
}
.visible {

}


.hide_in_desktop {
    display: none;
}


.photo {
    background: linear-gradient(to bottom, grey, lightgray);
    object-fit: cover;
        
}

.rond {
    border-radius: 50%;
    width: 36px;
    height: 33px;
    padding: 4px;
    background: #fff;
    border: 2px solid #bbbbbb;
    color: #666;
    text-align: center;
    font: 19px Arial, sans-serif;
}


/*******************************/ 
/* base Orange                 */
/*******************************/

.title_item {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 70%;
    color: #FFFFFE;
    background: #eaaf67;
    font-weight: Bold;
    border-color: #ddd;
    text-align: left;
    padding: 3px 3px 4px 10px;
}
.box_profil {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 100%;
    color: Black;
    background: #FDD9AC;
    font-weight: normal;
    border: solid;
    border-color: #eee;
    text-align: left;
    padding: 0.3em .6em;
}
.cadre {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 110%;
    color: Black;
    background: #FDD9AC;
    font-weight: bold;
    border: solid;
    border-color: #ddd;
    text-align: center;
    padding: 0.3em .6em;
}




/*******************************/
/* Couleurs                    */
/*******************************/

.background_IR  { background: #eae8e882; color: #4b4b4b; }
.background_R   { background: #fbb7b7; color: #4b4b4b; }
.background_O   { background: #f9e5cd; color: #4b4b4b; }
.background_J   { background: #f2edaf; color: #4b4b4b; }
.background_V   { background: #C0E3C5; color: #4b4b4b; }
.background_B   { background: #024dff36; color: #4b4b4b; }
.background_I   { background: #d193ff2b; color: #4b4b4b; }
.background_Vi  { background: #eb00ff1a; color: #4b4b4b; }
.background_UV  { background: #eFeFeF; color: #4b4b4b; }


.background_blanc        { background: #ffffff; color: #4b4b4b; }
.background_infra-rouge  { background: #eae8e882; color: #4b4b4b; }
.background_rouge        { background: #fbb7b7;   color: #4b4b4b; }
.background_orange       { background: #f9e5cd;   color: #4b4b4b; }
.background_jaune        { background: #f2edaf;   color: #4b4b4b; }
.background_vert         { background: #C0E3C5;   color: #4b4b4b; }
.background_bleu         { background: #024dff36; color: #4b4b4b; }
.background_violet       { background: #a900ff36; color: #4b4b4b; } 
.background_indigo       { background: #d193ff2b; color: #2b1145; }
.background_ultra-violet { background: #eFeFeF;   color: #4b4b4b; }

.background_gamma {
  background-color: white;
  background-image: linear-gradient(to bottom right, rgba(255, 0, 0, 0.2), rgba(255, 255, 0, 0.2), rgba(0, 255, 0, 0.2), rgba(0, 255, 255, 0.2), rgba(0, 0, 255, 0.2),  rgba(0, 0, 255, 0.2), rgba(238, 130, 238, 0.8));
  position: relative;
}


/*******************************/ 
/* Codex 2023             */
/*******************************/

.codex_description {
    padding: 7px;
    padding-left: 18px;
    font-style: italic;
    color: #666666;
}



/*******************************/ 
/* Page de style               */
/*******************************/

#famousRainbowLine img {
     max-width: 100%;
     height: 3px;
}

#lapage {
    /*
    padding-left: 5px;
    padding-right: 5px;
    */
    height: auto;
    overflow: hidden;
}


#right {
    float: right;
    width: 250px;
    padding-top:   0px;
    padding-left:  6px;
    padding-right: 6px;
    margin-left:  13px;
}

#left {
    float: none;
    width: auto;
    overflow: hidden;
    margin-left: 14px;

    /*  padding-right: 21px; */
    /* padding-left: 21px;   */
    /* padding-top: 34px;    */
    /* min-width: 350px;   */
}




.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 4px;
    border-radius: 5px;
    min-width: 300px;
    text-align: center;
    /*
    border: 2px solid #999999;
    background: #ffefdb;;
    */
}
.popup .emoji {
    font-size: 25px;
    margin: 7px;
    text-align: center;
}

.popup .message {
    font-size: 14px;
    /* color: #2222; */
    text-align: center;
    /*text-transform: uppercase; */
     color: #666666;
}

.message {
    color: #666666;
    text-align: center;
    margin-bottom: 12px;
    font-size: 14px;
}

.message a:link {     color: #666666;}
.message a:visited {    color: #666666;}
.message a:hover {     color: #666666;}



.card_message {
  text-shadow: -3px 1px 18px rgba(255,255,255,0.9);
  font-size: 17px;
  font-weight: bold;
  color: black;
  
  /*
  border-radius: 10px;
  padding: 3px;
  background-color:
  rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  margin: auto; width: 300px;
  */
}

audio {
            width: 100%;
            max-width: 400px;
            border: 2px solid #3498db;
            border-radius: 10px;
            background-color: #f4f4f4;
            padding: 5px;
        }


/*******************************/
/* Signaler un probleme        */
/*******************************/


.signal {
    text-align: center;
    padding-top: 12px;
    padding-bottom: 12px;
    color: #cccccc;
    font-size: 9px;
}

.signal a:link {     color: #bbbbbb;}
.signal a:visited {    color: #bbbbbb;}
.signal a:hover {     color: #bbbbbb;}



/*******************************/
/* LA  PREMIER PAGE            */
/*******************************/

#intro {

}

#intro h1 {
  font-family: 'SF Pixelate', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 26px;   
  padding:0px;
  margin: 0px; 
  margin-bottom: 34px;
}

#intro .description p {
  font-family: 'SF Pixelate', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
}

#intro #coeur {
  margin: 0px;
  margin-bottom: 29px;
  margin-top: 12px;
}

#intro #inscription {
    margin-top: 18px;
    font-size: 18px;
}

.bigHeart1 {
  width: 30%;
}

.bigHeart2 {
  width: 31%;
}


.pixel {
  font-family: 'SF Pixelate', sans-serif;
  font-weight: 700;
  font-style: normal;
}

.pub {
  background-color: white;
  padding: 32px;
  max-width: 620px;
  margin: auto;
}

.pub h2 {
    font-size: 18px;
    font-weight: bold;
}

.pub p {
     font-size: 15px;
}




/* CSS Basic Commun Extra Tools  */
.center { 
    text-align: center; 
}

.right { 
    text-align: right; 
}


/*******************************/
/* Page de Login               */
/*******************************/

#loginBox {
 margin-top: 23px;
}


.info_visibility {

    background-color: #fffcd0;
    font-size: 10px;
    border: 2px solid #e3d4b7;
    text-align: center;
    color: 777777;    

}

.propaTitle {
 margin-bottom: 0px;
 font-size: 24px;
}

.sourceFull {
 color: #999999;    
 margin-bottom: 21px;
}


.pageName {
    color: #999999;    
    text-align: center;
    font-size: 9px;
    margin-bottom: 21px;
    margin-top: 9px;
    text-transform: uppercase;
}




/*************************/
/* Propa Comment          */
/*************************/

.wall_item {
    margin-bottom: 1px;
    padding: 2px;
    padding-left: 4px;
}

.wall_item .text{
    padding: 12px;
    padding-left: 12px;
}


.wall_item .flexbar {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-right: 6px;
}

.wall_item .bouton {
    font-size: 9px;
    opacity: 80%;
    padding:  2px;
    border-radius: 5px;
    margin-right: 3px;
    background-color: white;
    padding-bottom: 2px;
    padding-left: 7px;
    padding-right: 7px;

}

.wall_item .bouton a:link { color: #555555; }




/*************************/
/* Wall  2024             */
/*************************/


.cadre_wall {
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    max-width: 700px;
    margin-bottom: 31px;
}

.cadre_article {
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    max-width: 700px;
    margin-bottom: 31px;
}


.wall {
    margin-bottom: 1px;
    padding: 2px;
    padding-left: 4px;

}


.wall .header {
    padding: 0px;
    margin-top:  0px;
}

.wall .header .source { font-size: 9px;  }
.wall .header .date   { font-size: 9px;  }
.wall .header .option { font-size: 9px;  }
.wall .header .source a:link      {  }
.wall .header .source a:visited   {  }
.wall .header .source a:hover     {  }
.wall .header .source a:active    {  }

.wall .text  {
    padding-left:   21px;
    padding-right:  31px;
    padding-top: 6px;
    padding-bottom: 9px;
    overflow-wrap: break-word;
    word-break: break-word; 
}


.wall .citoyen_1 {
    background-color: pink;
}


/******************/
/* Wall Form 2022 */


#wall_form {
    margin-bottom: 21px;
    color: #666666;
}

#wall_form textarea {
    font-size: 16px;
    border:  2px solid #aaaaaa;
}

#wall_form input[type=submit] {
 font-size: 9px; 
 padding: 3px;
 margin-top: 4px;
 float: right;
}


/*************************/
/* Mailbox               */
/*************************/

.messageBox {
    border: 1px solid #aaaaaa;
    margin-bottom: 4px;
    padding:  7px;
}

.messageBox .lovebot {
    text-align: center;
}

.messageBoxHeader {
    padding: 0px;
    margin-top:  0px;
    margin-bottom: 16px;

}

.messageHeaderSource { white-space: nowrap; }
.messageHeaderOption a:link    { color: #aaaaaa; }
.messageHeaderOption  a:visited { color: #aaaaaa; }
.messageHeaderOption  a:hover   { color: #aaaaaa; }
.messageHeaderOption  a:active  { color: #aaaaaa; }

.messageSource {
    padding:  5px;
    margin-bottom: 21px;
}



.messageText  {
    padding-left: 16px;
    padding-right: 8px; ;
    /* max-width: 450px; */
    overflow-wrap: break-word;
    /* word-break: break-all; */
}

.messageText .quote  {
    padding-left:   8px;
    padding-right:  8px;
    padding-top:    8px;
    padding-bottom: 8px;
    margin-bottom: 21px;
    font-style: italic;
    background-color: rgba(255, 255, 255, 0.8);

    /* max-width: 450px; */
    /* word-break: break-all; */
}



/* commentaire dixit d'une propa */

.messageText .dixit1 {
 padding: 14px;
 font-size:  10px;
 font-style: italic;
 color: #777777;
 background-color: #efefef;
 margin: 5px;
 margin-top: 12px;
}

.messageText .dixit2 {
 padding: 14px;
 font-size:  10px;
 font-style: italic;
 color: #777777;
 background-color: #fff1f0;
 margin: 5px;
 margin-bottom: 12px;
}

.messageOptions {
    text-align: right;
    color: #aaaaaa;
}

.mailboxEnteteDestinataire {
    padding: 6px;
    text-align: center;
    margin-top:  5px;
    margin-bottom:  5px;

}



/*************************/
/* Mailbox - Reply       */
/*************************/

#mailboxFormulaireBox {
    margin-bottom: 21px;
}


#mailboxZoneDeTexte {
/*    height: 150px; */
    font-size: 14px;
}

#mailboxButtonSend {
    text-align: right;
}



/******************************/
/* LA  PREMIER PAGE            */
/*******************************/

.bigHeart1 {
  width: 83%;
}

.bigHeart2 {
  width: 81%;
}




/* --------------------------*/
/*                           */
/* Première Page -  SIDE BAR */
/*                           */
/*---------------------------*/

aside {

}


.sidebar {

}

.sidebar h4 {
    padding-top: 0px;
    margin-top: 0px;
}


.sidebar .onePropaLink {
    font-size: 11px;
    margin-bottom: 7px;
    line-height: 95%;
}

.SUBinfo {

    border-radius: 3px;
    padding-top: 13px;
    padding-bottom: 13px;
    padding-left: 13px;
    padding-right: 13px;
    margin-bottom: 5px;
    font-size: 13px;
    /* text-align: justify; */
}

.SUBinfo h1 {
    color: rgba(52, 52, 52, 0.87);
    font-size: 17px;
    text-align: center;
}

.level0 {
    background-color: #eeeeee;
}






/* LOGO */

/*
#logoContainer {
    
}
*/

#logo {
    margin-top: 3px;
}

.box_logo {
    text-align: left;
    border: solid #ddd 4px;
    font: bold 12pt Verdena;
    color: #009;
    text-decoration: none;
    background: #eaaf67;
    margin: 10px 10px 0;
}



/* Machin qu'on retrouve partout */
/*********************************/

.error {
  margin: auto;
  margin-top: 24px;
  margin-bottom: 24px;
  background-color: #ffd4d4;
  border: 2px solid #ffa0a0;
  padding: 18px;
  max-width: 340px;
  font-size: 11px;
  text-align: center;

}




/*******************/
/* MENU princopale */
/*******************/

.menu {
    padding: 2px;
    text-align: center;
    width: 100%;
}

.bouton-menu-principale  {
    display:inline-block;   
    /* cursor: pointer; */
    width: 80px;
    margin-bottom: 3px;
    margin-left: 3px;
    margin-right: 3px;
    font-size: 12px;
    border-radius: 5px;
    border: 0px;
    padding: 4px;
}

.bouton-menu-principale a {
    /* display: block; */
    /* height: 100%; */
    /* width: 100%; */
    text-decoration: none;
    color: #622f0a;
}

.menuIcone {
     display:inline-block;   
    cursor: pointer;
    width: 70px;
    border: 0px solid red;
    text-align: center;
    margin-left: 3px;
    margin-right: 3px;
    font-size: 10px;  
    font-weight: bold;
}

.menuIcone a {
  color: #333333;
}
.menuIcone a:hover {
  color: #000000;
}


.bouton-menu-principale:hover  {
    cursor: pointer;
    background-color: #ffffff;
    color: #333333;

}


.bouton {

    border-radius: 3px;

}


 /* Memnu en icone sur les fiches */

    .menuActionSurFiche {
        align-items: left;
    }

    .menuActionSurFiche .menuButton {
        width:  60px;
        height: 40px;
        border-radius: 2px;
    }

    .menuActionSurFiche .menuIcone {
        width: 144px;
       margin-bottom: 21px;
    }

    .menuActionSurFiche .menuIcone a {
        font-size: 12px;
        font-weight: normal;
    }

    .menuActionSurFiche .menuButton {
        width: 140px;
        height: 40px;
        border-radius: 2px;
    }

    



  /* Mini Menu de Navigation d'option perso : */
  /*******************************************/


  #menuPersoContenair {
    max-width: 400px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    background-color: #f2f2f2;
    padding: 3px;
    margin-bottom: 0px;
    border-radius: 5px;
    margin-bottom: 20px;

  }

  #menuPersoContenair  .menuIconeMini {
    width:         90px;  
    font-size:     8px;  
    
    cursor:        pointer;
    border:        0px solid red;
    text-align:    center;
    margin-left:   3px;
    margin-right:  3px;
    font-weight:   bold;
    font-size:     9px;
    margin-bottom: 6px;  
    margin-top:    6px;  
      
  }

  #menuPersoContenair .menuIconeMini a {
    color: #333333;
    font-size: 8px;
  }
  #menuPersoContenair .menuIconeMini a:hover {
    color: black;
  }


  #menuPersoContenair .menuIconeMini .menuButtonMini {
    cursor: pointer;
    width: 49px;
    height: 29px;
    margin-bottom: 3px;
    background-color: #fffffe;
    padding: 1px;     
    font-size: 8px;
    border-radius: 8px;
    border: 0px;
    color: #999999;
    box-shadow: 1px 1px #aaaaaa;
  }

  #menuPersoContenair  .menuIconeMini .menuButtonMini:hover  {
      cursor: pointer;
      background-color: #ffffff;
      color: #333333;
  }


  /* LE PETIT MENU PERSI : LES couleurs  */
  /***************************************/


  button  #account  {
    color: red;
  }








/* ==========================================
                           
 Tout concernant la mise en page d'une fiche    
                         
============================================= */


#cadre_profile {
    margin:      0 auto;
    margin-top:  12px;
    max-width:   700px;
    padding:     2px;
    display:  flex;
    flex-direction: row;
    /* border:      2px solid blue; */
}

/* A gauche:  La photo de couverture */

#cadre_profile #cadre_photo {
  padding: 0px;
  width:  150px;
 /* border:      0px solid red; */
}


#cadre_profile #cadre_photo img { 
  width: 150px;
  min-height: 300px;
}


/* A droite:  La présentation */


#cadre_profile #cadre_presentation { 
  padding:      12px;
  min-height:  300px;
  max-width:   640px;
  width:       541px;
  margin-left: 5px;
  overflow:      hidden;
  text-overflow: ellipsis;
  border-top-right-radius: 12px;
}

#cadre_presentation #pseudo { 
    font-size: 21px;
    font-weight: bolder;
}

#cadre_presentation #presentation { 
    margin-top: 21px;
}




/* Le numéro ID en forme d'exposant */

sup {
    color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0.3);
    font-size : 10px;
}


/* le gros bandeaux rouges au dessus de la fiche */

.wap {
    border: 3px red solid;
    text-align: center;
    background: #eee;
    font-size: 20px;
    padding: 9px;
    max-width: 640px;
    margin:  auto;
    margin-bottom: 18px;
}



.presentation_de_secteur {
    /* color: #a8a8a8; */
     color: #777777; 
     font-style: italic;
}




/* ==========================================
                           
 Galerie Photo (mobile)
                         
============================================= */

.cadre_flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
}

.galeriePhotoItem {
    margin: 3px;
    width: 23%;
}




.margin a {
    color: #666666;
}

.margin:hover {
    color: black;
    background-color: white;
}






/*  STYLE générale des DES FORMULAIRE */

input {
  border: 2px solid #aaaaaa;
  padding: 5px;
  text-size: 14px;
}

input[type="submit"]
{
  font-size: 15px;
  text-align: center;
  padding-left:  18px;
  padding-right: 18px;
  margin: 24px;
  background-color: white;
}

input[type="submit"]:hover
{
    background-color: lightgreen;
}





/* Scanner Parano 2022 */

.scanner {
    float: left;
    border: 0px solid red;
    margin: 9px;
    margin-bottom: 12px;

}

.scanner .parano {
    padding: 3px;
    box-shadow: 1px 1px 4px #888888;
}

.scanner .parano .who {
    text-align: center;
    font-size: 11px;
}

.scanner .parano .id {
    text-align: center;
    font-size: 8px;
}

.scanner .parano .photoArea {
    margin: 3px;
    margin-bottom: 1px;
}

.scanner .parano .photoArea img {
    width:  60px;
    height: 120px;
    background: linear-gradient(to bottom, grey, darkgray);
}





/* Scanner Polaroid */

.scanner .polaroid {
    float: left;
    border: 0px solid red;
    padding: 0px;
    margin-right: 21px;
    margin-bottom: 21px;
    background-color: #eeeeee;
    box-shadow: 1px 1px 4px #888888;
}

.clear {
  content: "";
  clear: both;
  display: table;
}

.scanner .polaroid .who {
    text-align: center;
}

.scanner .polaroid .photoArea {
    margin: 8px;
    border: 0px solid pink;
    border-top:    1px solid #aaaaaa;
    border-right:  1px solid #aaaaaa;
    border-bottom: 1px solid #ffffff;
}

.scanner .polaroid .photoArea img {
    width:  89px;
    height: 120px;
    border: 0px solid pink;
}


/* rotate in css */
/* By default, we tilt all our images -2 degrees */
.polaroid {
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
}

/* Rotate all even images 2 degrees */
.polaroid:nth-child(even) {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
}

/* Don't rotate every third image, but offset its position */
.polaroid:nth-child(3n) {
    -webkit-transform: none;
    -moz-transform: none;
    position: relative;
    top: +2px;
}

/* Rotate every fifth image by 5 degrees and offset it */
.polaroid:nth-child(5n) {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    position: relative;
    right: 5px;
}

/* Keep default rotate for every eighth, but offset it */
.polaroid:nth-child(8n) {
    position: relative;
    top: 8px;
    right: 5px;
}

/* Keep default rotate for every eleventh, but offset it */
.polaroid:nth-child(11n) {
    position: relative;
    top: 3px;
    left: -5px;
}







.menuLink {
    padding-left: 6px;
    padding-right: 6px;
    padding: 3px;
}

.menuLink:hover {
    background-color: #eeeeee;
}

.box_minicom {
text-align: center;
border-right: solid #ddd 2px;
border-left:  solid #ddd 2px;
background: #ffffff;
font: 12px verdana, arial, helvetica, sans-serif;
margin: 0 10px;
padding: 2px;
}




.lordi {
margin-top: 5px;
margin-bottom: 3px;
color: #FFFFFE;
text-align: center;
width: 100%;
font: Bold 110% verdana, arial, helvetica, sans-serif;
padding: 0 0 0 5px;
}
a.lordi:link {
font-size: 9px;
color: #fffffe;
}
p {
margin-top: 6px;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 0;
}


/* la forme des liens */


.h4 {
margin-top: 5px;
margin-bottom: 3px;
color: #222;
text-align: left;
font: 95% verdana, arial, helvetica, sans-serif;
padding: 0 0 0 5px;
}


/* old but still used somewhere */

.message_systeme {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 90%;
    color: black;
    background: #eee;
    font-weight: normal;
    border: solid;
    border-color: #ddd;
    text-align: center;
    padding: 20px 60px;
}



	

.claire {
margin-top: 6px;
margin-bottom: 3px;
font-size: 90%;
color: #222;
text-align: left;
background: #FFFAFA;
padding: 5px 10px 5px 6px;
}
.fonce {
margin-top: 6px;
margin-bottom: 3px;
font-size: 90%;
color: #222;
text-align: left;
background: #FFE4E1;
padding: 5px 10px 5px 6px;
}
.alerte {
margin-top: 5px;
margin-bottom: 5px;
font-size: 90%;
color: black;
text-align: left;
background: #Faa;
padding: 20px 10px 20px 20px;
}
.gallery_image{
border-top: solid #ddd 1px;
border-left: solid #ddd 1px;
border-right: solid #ddd 1px;
}
.gallery_image_menu {
border-left: solid #ddd 1px;
border-right: solid #ddd 1px;
border-bottom: solid #ddd 1px;
width: 150px;
text-align: center;
}
.gallery_image_menu select {
font-size: 10px;
border: 1px solid;
width: 100px;
}

.gallery_image_menu input {
font-size: x-small;
}

.gallery_button_menu {
border-top: solid #fff 4px;
background: #ddd;
text-align: center;
}



/* messages.php layout */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.message-container {
    margin: auto;
    width: 60%;
    border:3px;
    padding: 10px;
   height: auto;
   overflow: hidden;
}

#message-desc {
  float: left;
  width: 200px;
  padding-right: 10px;
}

#message-text
{
  width: auto;
  float: none;
  overflow: hidden;
}
.message-container textarea {
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
textarea:focus {
  outline: 0;
  border-color: #4697e4;
}


.h1
{
   font-size: 3px;
}









/* RAPIDO */
/* RAPIDO */
/* RAPIDO */




.lovebox {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  margin-top: 3px;
  margin-bottom: 3px;
}

.lovebox:over {

}

.mojilove:hover {
}


.mr6 {
  margin-right: 13px;
}


.mojilove {
  font-size: 25px;
  width: 60px;
  text-align: center;
  padding: 4px;
  margin: 4px;
}


.boxvote {
    border-radius: 10px;
}

.boxvote:hover {
    background-color: #ffff66
}


.lesImages {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
  

}

.image_txt {
  text-align: center;
  font-weight: bold;
  color: #222222;
  background-color: #EEEEEE;
  padding: 3px;
  font-size: 11px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;

   white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width:121px;
}


.image_auteur {
  text-align: right;
  font-size: 9px;
}


.image_background {
  background-color: #eeeeee;
  border-left: 6px solid #eeeeee;
  border-right: 6px solid #eeeeee;
  border-bottom: 5px solid #eeeeee;
}

.image_display {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 192px; 
  overflow: hidden; 
  justify-content: center;
  align-items: center;  
  border-radius: 10px;
}

.image_display img {
  width: 100%;
  height: auto;
}

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.fill img {
  object-fit: cover;
  width: 110px;
  height: 192px;
}

.image_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
}

.left-text {
  flex: 1;
  font-size: 9px;
}

.right-text {
  flex: 1;
  text-align: right;
  font-size: 9px;
}

.image_footer a {

}

.is_erotic  {
    filter: blur(10px); /* Ajustez le niveau de flou en fonction de vos besoins */
}


#votebox_display {
  max-width: 630px;
  margin: auto;
  border-radius: 9px;
}