* {
  box-sizing: border-box;
}

body{
  line-height: 1.8;
  margin: 0;
  background-image: url("fond.jpg");
  background-repeat: no-repeat;
  background-size: cover;


}

img {
  max-width: 100%;
  height: auto;
}

.principale {
  display: flex;
}

.gauche {
  width: 50%;
  margin: auto;
  padding: 1% 2% 4% 2%;
  border-right: 2px solid black;
}
.droit {
  width: 50%;
  margin: auto;
  text-align: center;
}


.hide {
  display: none;
}
.regle {
  text-decoration: underline;
}
.tete {
  text-align: center;
}
.tete h2 {
  font-size: 200%;
}

.tete p {
  font-size: 30px;
}

h1{
  color: #ff6600;
  font-size: 275%;
}

i {
  color: #ff6600;
}

h2, h3 {
  color: #ff0000;
}

.regleDuJeu, p{
  font-size: 20px;
}
footer {
  display: flex;
  justify-content: space-around;
}

footer i {
  font-size: 53px;
}
.facebook i {
  color: blue;
}

.snap i {
  color: yellow;
}






/* FORMULAIRE*/

.participer {
  width: 25%;
  margin-top: 10px;
}



@import "http://fonts.googleapis.com/css?family=Raleway";
body{
font-family:'Raleway',sans-serif
}
img#logo{
margin-left:90px
}
div#first{
width:583px;
height:auto;
margin:15px auto 0;
padding:50px;
background-color:#EEE;
color:#333;
border:2px solid #C2D6FF;
border-radius:40px 0 40px 0
}
label{
font-size:15px;
font-weight:700;
width: 50%;
}
input#fname, input#fnam, input#password, input#quest{
background-image:url(../images/icon_name.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
/* margin-top:10px; */
margin-bottom:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser */
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser */
}
input#email{
background-image:url(../images/email.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
/* margin-top:10px; */
margin-bottom:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser */
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser */
}
input#contact{
background-image:url(../images/mobile.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
/* margin-top:10px; */
margin-bottom:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser */
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser */
}
input#address{
background-image:url(../images/home.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
/* margin-top:10px; */
margin-bottom:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser */
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser */
}
input#submit {
background-color:#4b69afb5;
border-radius:5px;
border:none;
padding:10px 25px;
color:#FFF;
text-shadow:1px 1px 1px #949494;
width: 35%;
margin-top: 5px;
transition: 300ms;
}
input#submit:hover{
background-color:#4baaafb5;
}



/*//////////////////////////////////////////////////////////////////
[ login ]*/

.limiter {
  width: 100%;
  margin: 0 auto;
}

.container-login100 {
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.container-login100::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.65);
}

.wrap-login100 {
  width: 390px;
  border-radius: 10px;
  overflow: hidden;

  background: transparent;
}


/*------------------------------------------------------------------
[ Form ]*/

.login100-form {
  width: 50%;
  margin: auto;
  border-radius: 10px;
  background-color: #fff;
}

.login100-form-logo {
  font-size: 60px;
  color: #333333;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 auto;
}

.login100-form-title {
  font-family: Ubuntu-Bold;
  font-size: 28px;
  color: #fff;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;

  display: block;
}


/*------------------------------------------------------------------
[ Input ]*/

.wrap-input100 {
  width: 100%;
  position: relative;
  border-bottom: 1px solid #e6e6e6;
  padding: 29px 0;
}

.input100 {
  font-family: Ubuntu-Regular;
  font-size: 20px;
  color: #555555;
  line-height: 1.2;

  display: block;
  width: 100%;
  height: 50px;
  background: transparent;
  padding: 0 10px 0 80px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

/*---------------------------------------------*/
.focus-input100 {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.focus-input100::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  background: #d41872;
  background: -webkit-linear-gradient(left, #a445b2, #d41872, #fa4299);
  background: -o-linear-gradient(left, #a445b2, #d41872, #fa4299);
  background: -moz-linear-gradient(left, #a445b2, #d41872, #fa4299);
  background: linear-gradient(left, #a445b2, #d41872, #fa4299);
}

.focus-input100::after {
  font-family: Linearicons-Free;
  font-size: 18px;
  color: #999999;

  content: attr(data-placeholder);
  display: block;
  width: 100%;
  position: absolute;
  top: 40px;
  left: 35px;


  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.input100:focus {
  padding-left: 60px;
}

.input100:focus + .focus-input100::after {
  left: 23px;
  color: #d41872;
}

.input100:focus + .focus-input100::before {
  width: 100%;
}

.has-val.input100 + .focus-input100::after {
  left: 23px;
  color: #d41872;
}

.has-val.input100 + .focus-input100::before {
  width: 100%;
}

.has-val.input100 {
  padding-left: 60px;
}


/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.login100-form-btn {
  font-family: Ubuntu-Bold;
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-width: 160px;
  height: 42px;
  border-radius: 21px;

  background: #d41872;
  background: -webkit-linear-gradient(left, #a445b2, #d41872, #fa4299);
  background: -o-linear-gradient(left, #a445b2, #d41872, #fa4299);
  background: -moz-linear-gradient(left, #a445b2, #d41872, #fa4299);
  background: linear-gradient(left, #a445b2, #d41872, #fa4299);
  position: relative;
  z-index: 1;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.login100-form-btn::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  background-color: #555555;
  top: 0;
  left: 0;
  opacity: 0;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.login100-form-btn:hover {
  background-color: transparent;
}

.login100-form-btn:hover:before {
  opacity: 1;
}


/*FORMULAIRE LOGIN*/




.first {
  width:583px;
  height:auto;
  margin:15px 0px 0px -48px;
  padding:50px;
  background-color:#EEE;
  color:#333;
  border:2px solid #C2D6FF;
  border-radius:40px 0 40px 0
  }


 /* ===========================
   📖 LAYOUT "LIVRE" RESPONSIVE
   - Mobile : 1 page pleine largeur
   - ≥768px paysage / ≥1024px : double page
   =========================== */

/* Structure de base (mobile-first = 1 page) */
.book {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px;
}

.book .page {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Typo confortable dans les pages */
.book .page h1, .book .page h2, .book .page h3 { line-height: 1.25; }
.book .page p, .book .page li { line-height: 1.65; }

/* Eviter débordements */
.book, .book .page { overflow-wrap: anywhere; word-break: break-word; }

/* Effet léger de “bord” */
.book .page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Tablettes/paysage : activer double page si on a de la place */
@media (min-width: 768px) and (orientation: landscape) {
  .book {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    perspective: 1000px; /* optionnel pour futur flip */
  }
  .book .page {
    width: 49%;
    margin: 0 0 20px;
    padding: 24px;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
  }
}

/* Desktop/tablette large : double page confortable */
@media (min-width: 1024px) {
  .book { gap: 2%; }
  .book .page {
    width: 49%;
    padding: 28px;
  }
}

/* Réduire mouvement si l’utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .book .page { transition: none !important; }
}

/* Harmonisation avec ton layout existant */
@media (max-width: 768px) {
  .principale { flex-direction: column; }
  .gauche, .droit { width: 100%; margin: 0; padding: 16px; }
  .gauche { border-right: none; border-bottom: 2px solid #00000020; }
}

/* Footer réseaux : un peu d’air sur mobile */
@media (max-width: 768px) {
  footer { justify-content: center; gap: 28px; padding: 18px 0; }
  footer i { font-size: 42px; }
}
@media (max-width: 576px) {
  footer { gap: 32px; }
  footer i { font-size: 38px; }
}