/* import de la police du site */
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');


/* pour remettre les valeurs à 0 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* tout sur le body */
body {
    /* image de fond du body */
    background-image: url(/pages/image/background.gif);
    background-attachment: fixed;
    background-size: cover;

    /* police du site */
    font-family: "Itim", cursive;
    font-weight: 500;
    font-style: normal;

    /* pour dire que le body fait la taille de l'écran */
    width: 100vw;
    height: 100vh;

    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/*changer couleur liens*/
a {
    color: rgb(41, 82, 164);
    font-weight: normal;
    text-decoration: underline dotted rgb(96, 48, 116);
}

a:hover {
    color: rgb(41, 82, 164);
    font-weight: normal;
    text-decoration: underline rgb(96, 48, 116);
}

a:visited {
    color: rgb(96, 48, 116);
    font-weight: normal;
}


/* style du cadre marron */
#cadrediv {
    background-image: url(/pages/image/cadre\ large\ fond2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 80%;
    aspect-ratio: 18/12;
    padding: 5% 5% 1% 7%;
    margin-top: 7.5%;
    margin-left: 26%;
    position: relative;
}

/* style du texte dans le cadre marron */
#textedanscadre {
    height: 82%;
    width: 98%;
    justify-content: center;
    align-content: center;
    overflow: auto;
    scrollbar-color: #562b0E hsla(120, 100%, 50%, 0.0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
}


/* layout des maisons */
#maisons {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: .5%;
    width: 90%;
    height: 20%;
    z-index: 1;
    left: 0;
    right: 0;
    top: -15.7%;
    margin: auto;
}

#maisons img {
    flex-grow: 1;
    cursor: pointer;
}

/* décaler la maison dessins à gauche */
#dessins {
    margin-left: -1%;
}

/* effet animation maison accueil */
#accueil {
    transition: transform 0.1s;
    transition-timing-function: ease;
}

#accueil:hover {
    transform: translateY(0.2rem);
}

/* effet animation maison chats */
#chats {
    transition: transform 0.1s;
    transition-timing-function: ease;
}

#chats:hover {
    transform: translateY(0.2rem);
}

/* effet animation maison bazar */
#bazar {
    transition: transform 0.1s;
    transition-timing-function: ease;
}

#bazar:hover {
    transform: translateY(0.2rem);
}

/* effet animation maison dessins */
#dessins {
    transition: transform 0.1s;
    transition-timing-function: ease;
}

#dessins:hover {
    transform: translateY(0.2rem);
}

/* effet animation maison habits */
#habits {
    transition: transform 0.1s;
    transition-timing-function: ease;
}

#habits:hover {
    transform: translateY(0.2rem);
}

/* effet animation maison photos */
#photos {
    transition: transform 0.1s;
    transition-timing-function: ease;
}

#photos:hover {
    transform: translateY(0.2rem);
}

/* effet animation maison inspi */
#inspi {
    transition: transform 0.1s;
    transition-timing-function: ease;
}

#inspi:hover {
    transform: translateY(0.2rem);
}


/* style des h1 */
h1 {
    font-weight: normal;
    color: rgb(102, 56, 56);
    text-align:center;
    background-color:rgb(255, 255, 255);
    border: 3px solid rgb(102, 56, 56);
    border-radius:20px;
    padding: 2% 0% 2% 0%;
    font-size: 2.1vw;
}

h2 {
    color: #562b0E;
    font-weight: normal;
    text-align:center;
    text-decoration: underline;
    font-size: 1.7vw;

}

h3 {
    color: #562b0E;
    font-weight: normal;
    text-align:left;
    text-decoration: underline;
}

/* style des paragraphes */
p {
    font-size: 1.3vw;
    color: #562b0E;
    text-align:justify;
}

/* logo a gauche */
#logo {
    height: 18%;
    position: absolute;
    top:6%;
    left: 18%;
    transform: rotate(-5deg)
}

/* animation logo */
#logo {
    transition: transform 0.7s;
    transition-timing-function: ease;
}

#logo:hover {
    transform: rotate(-720deg);
}

/* petit lapin et chien dans le texte */
.lapinchien {
    height: 35%;
    margin: auto;
    display: flex;
    transition: transform 0.1s;
    transition-timing-function: ease;
}
.lapinchien:hover {
    transform: rotate(3deg);
}

/* dessins page dessins */
.dessinsimg {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #dbcbc6;
    background-color: white;
    padding: 5px;
}

/* boite images */
.boite__images {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: .25rem;
    /** 1rem = 16px donc 0.5rem = 8px */
}

/* boite liens */
.boite__lien {
    width: 100%;
}

/* boite colonnes */
.boite__colonne {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    width: 49%;
}

/* style des smileys dans les h1 */
.smileytitre {
    width:1.61rem;
    display:inline;
}

/* animation shake */
.smileytitre {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -1px) rotate(-2deg); }
  20% { transform: translate(-1px, 0px) rotate(2deg); }
  30% { transform: translate(1px, 1px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 1px) rotate(-3deg); }
  60% { transform: translate(-1px, 1px) rotate(0deg); }
  70% { transform: translate(1px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 1px) rotate(0deg); }
  100% { transform: translate(1px, -1px) rotate(-2deg); }
}

/* style des smileys dans les paragraphes */
.smileyp{
    width:1.21rem;
    display:inline;
}

/* texte souligné */
.souligner {
    text-decoration: underline dashed;
}

/* texte en rouge */
.rouge {
    color:rgb(189, 65, 90)
}

/* photo de moi dans accueil */
.photomoi {
    height:18rem;
    border-radius: 10px;

    position: relative;
}

/* avatar dans accueil */
.avi {
    height:10rem;
    position:relative;
    left:6.3rem;
    bottom:21rem;
    
    transition: transform 1s;
    transition-timing-function: ease-in-out;
}

.avi:hover {
    transform: rotate(720deg);
}

.accueilphotos {
    margin-left:15%;
}

/* border gauche du site */
#border {
    position: fixed;
    height:100%;
    left: 0%;
}

/* border droite du site */
#borderdroite {
    position: fixed;
    height:100%;
    right: 0%;
}

.boite__imageschats {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    gap: .25rem;
    width:45%;
    margin-left:-1%;
}

/* boite colonnes texte à droite */
.boite__colonnetxt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    width: 50%;
    margin-left: 3%;
}

/* boite colonnes texte à gauche */
.boite__colonnetxtgauche {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    width: 50%;
    margin-right: 4%;
}

/* style des smileys en puces */
.smileypuces{
    width:0.90rem;
    display:inline;
}

/* paragraphes centrés */
#textechats {
    text-align: center;
}

.separation {
    width:35%;
    margin: auto;
    display: flex;
}

.boite__imageschats1colonne {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
    width:45%;
}

.portail_blog {
    border-style: solid ;
    border-color:rgb(255, 255, 255);
    filter: drop-shadow(2px 3px 2.5px hsla(0, 0%, 0%, 1));
    background-image:url(/blog/images/fond\ portail\ blog.png);
    border-radius: 35px;
    padding: 8% 4% 8% 4%;
    transition: transform 0.7s;

}

.portail_blog:hover {
    transform: scale(1.2);
}

.texteportailblog{
    font-size:140%;
    text-align: center;
    color:rgb(255, 255, 255);
    text-shadow: 2px 2px 3px hsla(0, 0%, 0%, 1);
}

.boiteaportail {
    margin: 0% 27% 0% 27%;
}


#petalerouge {
    height: 20%;
    position: absolute;
    left: 17%;
    top: 32%;
    transition: transform 0.3s;
}

#petalerouge:hover {
    transform: translate(-6%, -10%);
}

#petaleorange {
    height: 17.8%;
    position: absolute;
    left: 22.8%;
    top: 34.3%;
    transition: transform 0.3s;
}

#petaleorange:hover {
    transform: translate(8%, -10%);
}

#petalejaune {
    height: 15.5%;
    position: absolute;
    left: 23%;
    top: 47.1%;
    transition: transform 0.3s;
}

#petalejaune:hover {
    transform: translate(10%, 2%);
}

#petalevert {
    height: 20%;
    position: absolute;
    left: 21.5%;
    top: 53%;
    transition: transform 0.3s;
}

#petalevert:hover {
    transform: translate(3.5%, 10%);
}

#petalebleu {
    height: 17.7%;
    position: absolute;
    left: 14.4%;
    top: 52.9%;
    transition: transform 0.3s;
}

#petalebleu:hover {
    transform: translate(-6.5%, 7%);
}

#petaleviolet {
    height: 15.5%;
    position: absolute;
    left: 13.3%;
    top: 42.2%;
    transition: transform 0.3s;
}

#petaleviolet:hover {
    transform: translate(-10%, -2%);
}

#centrefleur {
    height: 18%;
    position: absolute;
    left: 18.5%;
    top: 43.8%;
    animation: secouerlent 1.5s;
    animation-iteration-count: infinite;
}

#mesliens {
    position: absolute;
    z-index: 2;
    height: 9%;
    top: 48%;
    left: 19.5%;
    animation: secouerlent 1.5s;
    animation-iteration-count: infinite;
}

#dessousfleur {
    height: 40%;
    position: absolute;
    bottom: 0%;
    left: 12%;
    z-index: -1;

}

@keyframes secouerlent {
  0% { transform: rotate(0deg); }
  16% { transform: rotate(2deg); }
  32% { transform: rotate(-2deg); }
  48% { transform: rotate(2deg); }
  64% { transform: rotate(-2deg); }
  80% { transform: rotate(2deg); }
  96% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

.blinkiesites {
    width: 100%;
}

.blinkieinspi {
    width: 20%;
    margin: auto;
    display: flex;
}

.miamofun {
    border-radius: 10px;
    border: 1px solid #dbcbc6;
    background-color: white;
    padding: 5px;
    height: 18rem;
}

.eglantine {
    height:8rem;
    position:relative;

}

.centrer {
    text-align: center;
}

.habitsimg {
    width: 20vh;
    height: 40vh;
    object-fit: cover;
}

.boiteimgtxt {
    width: 22vh;
    border-radius: 10px;
    border: 1px solid #dbcbc6;
    background-color: white;
    padding: 5px;
    gap: .5%;
}

.credithabits {
    font-size: 90%;
    text-align: center;
}

.habitsprefsimg {
    width: 20vh;
    object-fit: cover;
}

.texterigolo {
    text-align: center;
    position: relative;
}

.texterigolo2 {
    text-align: center;
    position: relative;
    
}

.mobilewarning {
    position: fixed;
    inset: 0;
    font-size: 3.2vh;
    margin: 25% 7% 25% 7%;
    text-align: center;
    align-content: center;
    background-color: rgb(255, 250, 243);
    box-shadow:
	    inset #562b0E 0 0 0 0.3vmax, 
        inset #b5743c 0 0 0 0.6vmax, 
        inset #562b0E 0 0 0 0.9vmax;
    border-radius: 3vmax;
    padding: 3% 6% 3% 6%;
    overflow: scroll;
    color: #562b0E;
}

.boite_colonne{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: flex-start;
    width: 49%;
}

.boite_images {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
}

.cagechats {
    height: 48vh;
    border:3px solid rgb(102, 56, 56);
    border-radius: 10px;
    overflow: auto;
    padding: 4%;
    scrollbar-width: thin;
    background-image: url(/pages/image/fondpetitcadre.jpg);
    background-size: 85%;
}