/*********************************************************************************************************************/
/********************************************** Polices **************************************************************/
/*********************************************************************************************************************/

@font-face {
  /* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 10, 2013 11:23:00 AM America/New_York */
  font-family: "AlexBrushRegular";
  src: url("fonts/AlexBrush-Regular-OTF-webfont.eot");
  src: url("fonts/AlexBrush-Regular-OTF-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("fonts/AlexBrush-Regular-OTF-webfont.woff") format("woff"),
    url("fonts/AlexBrush-Regular-OTF-webfont.ttf") format("truetype"),
    url("fonts/AlexBrush-Regular-OTF-webfont.svg#AlexBrushRegular")
      format("svg");
}

@font-face {
  font-family: "Redressed";
  src: url("fonts/Redressed.eot") format("eot"),
    url("fonts/Redressed.woff") format("woff"),
    url("fonts/Redressed.ttf") format("truetype"),
    url("fonts/Redressed.svg#Redressed") format("svg");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Arial";
  margin: 0px;
  color: black;
}

/*********************************************************************************************************************/
/******** Le style des sections submit : boutons valider etc suivant qu'on ait 1, 2, 3 boutons dans la section *******/
/*********************************************************************************************************************/

[class^=submit] {
  display: flex;
  width: fit-content;
  margin: 40px auto 0px auto;
}

[class^=submit] button[type="submit"],
[class^=submit] button[type="reset"],
[class^=submit] .button,
[class^=submit] .cancel {
  margin: 1rem;
}

/*********************************************************************************************************************/
/****************** Le style des boutons submit : valider, annuler, et l'icône du petit cadeau ***********************/
/*********************************************************************************************************************/

input[type="submit"],
.gift .icon,
.bought .icon,
.gift_img,
.cancel,
.lucide {
  display: inline-block;
  vertical-align: top;
  width: 3rem;
  height: 3rem;
  border: none;
  cursor: pointer;
}

input[type="submit"],
.cancel {
  margin: 0 10px;
}

.gift .icon,
.bought .icon,
.gift_imgs {
  float: left;
}

button[type="submit"],
button[type="reset"],
.cancel, .button {
  /* Normalize*/
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
  overflow: visible;
  text-transform: none;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-border-radius: 0;

  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.bought.grayed,
.bought.grayed a {
  background-color: #d0d0d0;
}

/*********************************************************************************************************************/
/********** Les icônes de petit cadeau venant du Sprite : pour la page "Faire un cadeau" en fonction des gens ********/
/*********************************************************************************************************************/

.black,
.theme-black .lucide {
  color: #000;
}

.blue,
.theme-blue .lucide {
  color: #00137f;
}

.brown,
.theme-brown .lucide {
  color: #61331d;
}

.green,
.theme-green .lucide {
  color: #1d7f52;
}

.lightblue,
.theme-lightblue .lucide {
  color: #7392ff;
}

.lightgreen,
.theme-lightgreen .lucide {
  color: #00e38e;
}

.lightpink,
.theme-lightpink .lucide {
  color: #fe88b7;
}

.pink,
.theme-pink .lucide {
  color: #db0058;
}

.purple,
.theme-purple .lucide {
  color: #8b00cc;
}

.red,
.theme-red .lucide {
  color: #ff0000;
}

/*********************************************************************************************************************/
/************************************ Les icônes de catégories des voeux *********************************************/
/*********************************************************************************************************************/

.gift .icon,
.bought .icon,
.gift .icon.cat1,
.bought .icon.cat1 {
  background: url(../images/sprite.png) no-repeat -64px 0;
}

.gift .icon.cat2,
.bought .icon.cat2 {
  background: url(../images/icones/2_culture.png) no-repeat;
}

.gift .icon.cat3,
.bought .icon.cat3 {
  background: url(../images/icones/3_jeux.png) no-repeat;
}

.gift .icon.cat4,
.bought .icon.cat4 {
  background: url(../images/icones/4_multimedia.png) no-repeat;
}

.gift .icon.cat5,
.bought .icon.cat5 {
  background: url(../images/icones/5_cuisine.png) no-repeat;
}

.gift .icon.cat6,
.bought .icon.cat6 {
  background: url(../images/icones/6_bricolage.png) no-repeat;
}

.gift .icon.cat7,
.bought .icon.cat7 {
  background: url(../images/icones/7_mode.png) no-repeat;
}

.gift .icon.cat8,
.bought .icon.cat8 {
  background: url(../images/icones/8_voyages.png) no-repeat;
}

.gift .icon.cat9,
.bought .icon.cat9 {
  background: url(../images/icones/9_maison.png) no-repeat;
}

.gift .icon.cat10,
.bought .icon.cat10 {
  background: url(../images/icones/10_sport.png) no-repeat;
}

.gift .icon.cat11,
.bought .icon.cat11 {
  background: url(../images/icones/11_enfants.png) no-repeat;
}

/*********************************************************************************************************************/
/************************************ Style spécifique à la page d'accueil *******************************************/
/*********************************************************************************************************************/

header.login {
  margin-top: 12%;
  margin-bottom: 60px;
}

/*********************************************************************************************************************/
/****************** Style spécifique aux sections de login et de saisie (popin diverses) *****************************/
/*********************************************************************************************************************/

h1.typein {
  /* Le titre des popin */
  font-family: "AlexBrushRegular";
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 40px;
  text-shadow: 2px 1px 2px silver;
}

h2 {
  font-family: "Redressed";
  font-weight: normal;
  font-size: 2em;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 40px;
  color: black;
  text-transform: capitalize;
  text-shadow: 2px 1px 2px silver;
}

p.asterisque {
  /* Le texte en * en bas de la popin */
  font-family: "Arial";
  font-size: 12px;
  font-style: italic;
}

section.typein,
section.question {
  display: block;
  margin: 0px auto 0px auto;
  width: 350px;
}

p.typein,
p.question {
  text-align: right;
  clear: both;
}

p.typein.desc {
  text-align: left;
}

p.typein label {
  float: left;
  padding-top: 5px;
}

p.typein.desc label {
  float: none;
}

.typein textarea,
.typein input {
  width: 150px;
  font-family: "Arial";
}

.typein input:valid {
  box-shadow: 0 0 2px 1px green;
}

.typein input:invalid {
  box-shadow: 0 0 2px 1px red;
}

.typein textarea {
  margin: 2px 0px;
  padding-left: 0px;
}

span.typein {
  width: 250px;
  display: block;
  margin: 30px auto;
  font-family: "Redressed";
  font-size: 1.5em;
  text-align: center;
  text-shadow: 2px 1px 2px silver;
}

select {
  width: 154px;
}

a.forgot {
  display: block;
  float: right;
  font-size: 0.8em;
  color: grey;
  font-style: italic;
  margin-top: 3px;
}

/*********************************************************************************************************************/
/****** Le style du header, du "Déconnexion" et du menu de navigation pour les autres pages que la page de login *****/
/*********************************************************************************************************************/
.nav_2 {
  position: absolute;
  right: 10px;
  margin-top: -30px;
}

.nav_2 a {
  font-size: 1.2em;
  font-family: "Redressed";
  color: black;
  text-decoration: none;
  padding: 0 10px;
}

header {
  font-family: "AlexBrushRegular";
  font-size: 5em;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 40px;
  text-shadow: 2px 1px 2px silver;
}

header span {
  text-transform: capitalize;
}

#nav {
  /*width: 802px;*/
  border-radius: 5px;
  margin: 0 auto 60px auto;
}

#nav ul {
  margin: 20px 0px;
  padding: 0px 50px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

#nav li {
  list-style: none;
}

/* Mobile styles - stack vertically on small screens */
@media screen and (max-width: 968px) {
  #nav ul {
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Reduce gap for vertical spacing */
    padding: 0px 20px; /* Reduce horizontal padding on mobile */
  }

  #nav li {
    margin: 6px 0;
  }
}

#nav a {
  font-family: "Redressed";
  font-size: 1.3em;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  border: outset 1px;
}

#nav a.active {
  color: white;
}

/*********************************************************************************************************************/
/****** Le style des sections de contenu des pages Wishlist, Faire un cadeau et Giftlist => quand l'utilisateur ******/
/********************************* n'a rien à saisir, sinon c'est le typein ******************************************/
/*********************************************************************************************************************/

section.content,
form.clic {
  display: block;
  margin-left: 0%;
  width: 656px;
  margin: 0 auto 20px auto;
}

/*********************************************************************************************************************/
/******** Le style des div : .gift= contient l'icône du petit cadeau + le titre + la description *********************/
/*************** et .bought= la même div mais quand le cadeau est déjà acheté ****************************************/
/*********************************************************************************************************************/

.gift,
.bought {
  display: flex;
  clear: both;
  margin-bottom: 15px;
  padding: 15px;
  min-height: 60px;
}

.gift {
  cursor: pointer;
}

.gift:hover,
.gift.selected {
  border-radius: 8px;
}

.gift_title,
.bought a {
  display: block;
  font-family: "Redressed";
  font-size: 1.3em;
  text-shadow: 1px 1px 1px silver;
}

.gift_title:first-letter {
  text-transform: capitalize;
}

.gift_title a {
  color: black;
}

.bought {
  font-style: italic;
  border-radius: 5px;
  cursor: not-allowed;
}

.bought,
.bought a {
  background-color: #fff;
}

.gift:hover,
.gift.selected {
  border-color: #d0d0d0;
  background-color: #ebebeb;
  color: black;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#e3e3e3),
    to(##ebebeb)
  );
  background: -moz-linear-gradient(top, #e3e3e3, ##ebebeb);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#ebebeb');
  box-shadow: 1px 1px 10px #cdcdcd inset;
}

.gift_descr {
  display: inline-block;
  vertical-align: top;
  margin-left: 42px;
  width: 500px;
}

.gift_descr p {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

/*********************************************************************************************************************/
/******** Si le souhait contient un lien correspondant, flèche au survol et à la sélection de la div *****************/
/*********************** Si le cadeau est acheté, smiley au survol du cadeau *****************************************/
/*********************************************************************************************************************/

.gift:hover .follow_link,
.gift.selected .follow_link,
.bought:hover .offered,
.bought:hover .follow_link {
  visibility: visible;
}

input.offered {
  background: url(../images/happy.png) no-repeat;
}

div.follow_link {
  background: url(../images/arrow.png) no-repeat;
}

div.follow_link,
input.offered {
  display: inline-block;
  float: right;
  margin: 0 0 0 15px;
  visibility: hidden;
  width: 32px;
  height: 32px;
}

/*********************************************************************************************************************/
/******** Le style de la div qui affiche les personnes à qui on peut faire un cadeau, page Faire un cadeau ***********/
/*********************************************************************************************************************/

.gift_people {
  display: inline-block;
  padding-top: 10px;
  margin-left: 10px;
  text-decoration: underline;
  font-family: "Redressed";
  font-size: 1.3em;
  text-shadow: 1px 1px 1px silver;
  color: black;
  text-transform: capitalize;
}

.people {
  text-decoration: none;
}

/*********************************************************************************************************************/
/**** Le style de la page "Giftlist" pour le paragraphe qui affiche le nom de la personne à qui on fait le cadeau ****/
/*********************************************************************************************************************/

p.gift_receiver,
p.category {
  font-family: "Redressed";
  font-size: 1.5em;
  text-shadow: 1px 1px 1px silver;
  color: black;
  text-transform: capitalize;
  text-decoration: underline;
}

/*********************************************************************************************************************/
/******** En relation avec le code Javascript "bouton_cadeau.js" qui cache l'icône du bouton radio *******************/
/*********************************************************************************************************************/

.input_hidden {
  position: absolute;
  left: -99999px;
}

/*********************************************************************************************************************/
/************************************ Le style appliqué aux popin ****************************************************/
/*********************************************************************************************************************/

#popin-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

#popin-modal {
  position: absolute;
  border-radius: 12px;
  padding: 4px;
  background: rgba(67, 67, 67, 0.2);
}

#popin-content {
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  background: #fff;
}

#popin-content p {
  margin-bottom: 10px;
}

p.asterisque {
  /* Le texte en bas de l'* dans la popin */
  color: grey;
}

.close {
  /* Pour la petite icône ronde qui permet de fermer la popin */
  width: 32px;
  height: 32px;
  position: absolute;
  top: -8px; /* Half the icon's height */
  right: -8px; /* half the icon's width */
  z-index: 50;
  background: url(../images/close.png);
  cursor: pointer;
}

/*********************************************************************************************************************/
/************************** Le style du menu de navigation pour les administrateurs **********************************/
/*********************************************************************************************************************/

#admin {
  width: 100px;
  height: 200px;
  border-radius: 5px;
  float: left;
  position: absolute;
  top: 250px;
  margin-left: 15px;
  background-color: #d0d0d0;
  border: solid 1px grey;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#d0d0d0),
    to(#c6c6c6)
  );
  background: -moz-linear-gradient(top, #d0d0d0, #c6c6c6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d0d0', endColorstr='#c6c6c6');
}

#admin ul {
  margin: 0px;
  padding: 0px;
}

#admin li {
  display: block;
  margin: 0px 10px;
}

#admin a {
  font-family: "Redressed";
  font-size: 1em;
  text-decoration: none;
  color: black;
  padding: 0px;
  letter-spacing: 1px;
}

#admin a:hover {
  text-decoration: underline;
  color: white;
}

#admin a:selected {
  text-decoration: underline;
  color: white;
}

#admin h1 {
  font-family: "AlexBrushRegular";
  text-align: center;
  font-size: 1.9em;
  text-decoration: none;
  margin-top: 15px;
}

.helpLink {
  /*display:none;*/
}