body:before { 
  content:" "; position:absolute; width:100%; height:100%; top:0; left:0; 
  /* http://lacdegrandmaison.fr/_imgs/photos/2019-05/auberge-sous-la-neige-de-face.jpg */
/*  
  background: url(/_imgs/photos/2019-05/auberge-sous-la-neige-de-face.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
*/
  background-size: cover;
  opacity: .15; 
  z-index: -1;
} 
body {
 margin-left:0.2%; margin-right:0.2%; padding-left:0; padding-right:0;
}

a { text-decoration:none; color:inherit; }

#entete {
  height:56px; margin: 50px 0 0 2%;
  font-family: helvetica;
  font-size:1.2em;
}

#logo {
/*  float:right; */
  height: 200px;
  position:absolute;
  right:1%; top:1%;
}
/*
#logo:after { content:" "; clear:both; }
*/

#basdepage{
  position: fixed;
  bottom:0; left:0;
  width:100%;
  font-size:0.8em;
  font-family: arial;
  background-color: white;
}
#basdepage>* { 
  float:left;
  width:31.3%; 
  padding-left:1%; padding-right:1%;
}
#basdepage i { font-size : smaller; }

    #avatar {
background-size: 240%;
background-position: 50% 88%;
background-image: url(/_imgs/photos/2021-01/nous/IMG_4954.jpeg);
display: block;
width: 80pt;
height: 80pt;
border: none;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
border-radius: 75px;
position: absolute;
top: 0.5%;
left:0.5%;
    }

#surimpression { 
  font-size: 2.88em; font-family:'Brush Script MT'; /* 'Apple Chancery'; */
  color : #D60040;
  display:block; 
  position:fixed; top:18%; right:2%;  
  padding:10px; width:250px;
  z-index:100;
  /* Rotation du div */
  transform:rotate(-4deg);
  -ms-transform:rotate(-4deg); /* Internet Explorer */
  -moz-transform:rotate(-4deg); /* Firefox */
  -webkit-transform:rotate(-4deg); /* Safari et Chrome */
  -o-transform:rotate(-4deg); /* Opera */
}


#content {
  /*float:left;*/
}
#content:after { /*content:" "; clear:both;*/ }

#photos { /*float:left;*/ margin-right:1%; }

// #content .paysage { width:100; background-color:white; z-index:10; }
// #content .portrait { width:70 /*(=100*21/29.7)*/; background-color:white; z-index:10; }
#content .paysage { background-color:white; z-index:10; }
#content .portrait { /*(=100*21/29.7)*/; background-color:white; z-index:10; }

#description { font-family: helvetica; }

.vignette {
  position:absolute;
  padding:6px;
  background-color:white;
  border:solid 1px #444;
  border-radius: 4px;
  width: 22%;
}
.vignette legend {
  position:relative;
  bottom:0; right:0; width:100%;
  text-align:center;
  font-family: helvetica;
  font-size:90%;
  font-style:italic;
 /* text-transform: capitalize; */
  margin-top: 2%;
}
.vignette legend::first-letter {
  text-transform: uppercase;
}
.qrcode { max-width:140; max-height:140; /* margin: 0 auto; */ }

.post-it {
  position:fixed;bottom:15%;right:8%;  
  padding:10px; width:210px; min-height:20%;
  z-index:100;
  background-color: #eec;   /* jaune */
  background-image: linear-gradient(#fdfccd, #fcfab1);  /* dégradé de jaunes */
  background-color: #ece; // rose
  background-image: linear-gradient(#fccdfc, #fab1fa);  /* dégradé de roses */
  background-color: #cec; // vert
  background-image: linear-gradient(#cdfccd, #b1fab1);  /* dégradé de verts */
  background-color: #cce; // violet
  background-image: linear-gradient(#cdcdfc, #b1b1fa);  /* dégradé de violets */
  box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); 
  border-radius: 4px;
  /* Rotation du div */
  transform:rotate(20deg);
  -ms-transform:rotate(20deg); /* Internet Explorer */
  -moz-transform:rotate(20deg); /* Firefox */
  -webkit-transform:rotate(20deg); /* Safari et Chrome */
  -o-transform:rotate(20deg); /* Opera */
}

#resume { 
  position: absolute; /* right:1%; bottom:37%; */
  padding:0px 8px 0px 2px; /* top right bottom left */
  z-index:200;
  background-color: #eec;   /* jaune */
  /*background-image: linear-gradient(#fdfccd, #fcfab1); */ /* dégradé de jaunes */
  background-image: linear-gradient(#cdfccd, #b1fab1);  /* dégradé de verts */
  box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); 
  border-radius: 4px;
  /* Rotation du div */
  transform:rotate(-4deg);
  -ms-transform:rotate(-4deg); /* Internet Explorer */
  -moz-transform:rotate(-4deg); /* Firefox */
  -webkit-transform:rotate(-4deg); /* Safari et Chrome */
  -o-transform:rotate(-4deg); /* Opera */
  /* Police */
  font-family: comic sans ms;
  font-size: 0.9em;

}
.info { 
  height: 2.8em; /* hauteur du parent */
  line-height: 1.2em; /* hauteur de ligne */ 
  margin: 2px auto;
}
.info > p { margin-top: 0.2%; line-height: 0.9em; padding-top: 4px; }
.info > p sup { position: relative; line-height: 0.8; }
/*.info:nth-child(6) > p { margin-bottom:40px }*/
/* .info:after {content:' ';display:block;clear:both;line-height:1px}*/
.fa { position: absolute; }
.picto { font-size:2.4em; float:left; }
.picto + * { padding-left:3.6em; /* padding-top:0.4em; */ }
.picto:after { /* content:' '; display:block; */ }


#resume { bottom: 47%; right: 1.5%; }
#devant {
  position:fixed;bottom:10.5%;right:8.5%;  
  padding:10px; width:180px; min-height:18%;
  z-index:100;
  background-color: #eec;   /* jaune */
  background-image: linear-gradient(#fdfccd, #fcfab1);  /* dégradé de jaunes */
  box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); 
  border-radius: 4px;
  /* Rotation du div */
  transform:rotate(14deg);
  -ms-transform:rotate(14deg); /* Internet Explorer */
  -moz-transform:rotate(14deg); /* Firefox */
  -webkit-transform:rotate(14deg); /* Safari et Chrome */
  -o-transform:rotate(14deg); /* Opera */
  /* Police */
  font-family: comic sans ms;
  font-size: 0.75em;
}
#devant p {
  line-height:0.8;
  margin-top:0;
  margin-bottom:0;
}

#entete a { cursor:help; }
#aide {
  position:absolute;top:2%;left:8%;  
  padding:1%; width:80%; min-height:20%;
  z-index:100;
  background-color: #fcdddd; // rouge clair //#d78; //#d89998; // vieux-rose // #e93644; #ea545e;// rouge-vermillon
  background-image: linear-gradient(#d89998, #ea545e);  /* dégradé de roses */
  box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); 
  border-radius: 4px;
  opacity:0.96;
  border:solid 2px #fa6666;
  font: 0.9rem helvetica;
}
#aide h1 { color: #fa6666; }
#aide>a:first-child { 
    float:right; display: fixed;     
    border-radius: 50%;
    /*cursor: help; */
}
#aide a:first-child { text-decoration:none; color: #fa6666; /*color:transparent;*/ }
#aide a { text-decoration:underline; color:blue; }

#aide table { 
  background-color:rgba(255,255,255,1); border: solid 1px grey; 
  margin:0 auto; 
  font: 12px/normal Arial, Helvetica, sans-serif; 
}
#aide table tr:nth-child(2n) { background-color:rgba(200,200,200,1);  }
#aide table td:nth-child(2) { background-color:rgba(245,245,200,1);  }
#aide table tr:nth-child(2n) td:nth-child(2) { background-color:rgba(220,220,180,1);  }
#aide table td:nth-child(3) { background-color:rgba(200,245,245,1);  }
#aide table tr:nth-child(2n) td:nth-child(3) { background-color:rgba(180,220,220,1);  }
#aide td { text-align:center; }

.infobulle {
  position: relative;  /* les .infobulle deviennent référents */
  cursor: help;
}
[info] {
    position: absolute;
    top: 0.6em; right: 0.6em;
    color: #413219; font-size: 20px;
}

/* on génère un élément :after lors du survol et du focus :*/
/*
#aide>img:first-child:hover::after, #aide>img:first-child:focus::after,
.test:hover::after, .test:focus::after,  */
[info]:hover::after, [info]:focus::after {
  content: attr(info);  /* on affiche info */
  position: absolute; 
  top: 1.8em; 
  transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne */
  color: #fff; padding:4px;
  background: #413219 none repeat scroll 0 0;
  border-radius: 4px;
}

[info]:hover::before, [info]:focus::before {
    content: "▲";/*"▼";*/
    position: absolute; /* absolute; */
    top: 0.9em; right: 0;
    color: #413219; font-size: 20px;
    transform: translateX(-50%);
}


@media print {
  @page {
   body { margin: 0; }

   body:before { 
    content:" "; position:absolute; width:100%; height:100%; top:0; left:0; 
    background: url(/_imgs/photos/2021-01/vue-sur-l-auberge/P1070246.jpeg) no-repeat left top fixed  !important; 
   }
/*    
  a[href^="http"]:not([href*="monsiteweb.com"]):after {
    content: " (" attr(href) ")";
  }
*/
/*
  #basedepage:after { 
    content:"Pour imprimer l'image de fond sous firefox, n'oubliez pas de cocher la case !";
    display:block; color:red;
  }
*/    
  }
}

@media screen and (min-width: 48em) {
    /* media type limité à écran */ 
}

@media (min-width: 48em) {
    /* tous les media types */ 
}