:root {
  --orange: rgb(255,200,150);
  --bleu: rgb(150,200,255);
  --bleu-canard: #20AAC5;
  --bleu-canard-clair: hsl(190,60%,60%);
  --bleu-ciel: rgba(150,200,255, .4);
  --gris: #CCC;
  --quasi-noir: #252525;
  --gris-sombre: #444;
}

body {
  margin:  0px;
  margin-bottom: 150px;
}

@font-face {
  font-family: "Mathilde";
  src: url("mathilde.otf");
}

@font-face {
  font-family: "BubblerOne";
  src: url("BubblerOne.ttf");
}

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: local('Tangerine Regular'), local('Tangerine-Regular'), url("Tangerine.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

nav {
  /*! padding-bottom: 10px; */
  margin: 0px auto;
  max-width: 980px;
  padding: 0px 20px;
}


nav a {
  border-bottom: 2px solid var(--bleu-canard);
}

nav a:hover {
  border-bottom: 2px solid var(--gris);
}

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

#main a, #main a:visited{
  color: var(--bleu-canard);
  font-weight: bold;
}

input[type="submit"] {
  display:block;
  line-height: 1.5em;
  border:none;
  cursor: pointer;
  margin: 30px auto 30px;
  white-space: normal;
}

#bouton-confirmation,
form[action='confirmation.php'] input[type="submit"] {
  border-radius: 5px;
  background-color: var(--bleu-canard-clair);
  max-width: 300px;
  padding: 6px 20px 7px;
  text-align: center;
  font-size: 45px;
  font-family: 'Tangerine';
  box-shadow: 2px 2px 2px 1px var(--bleu-ciel);
  line-height: initial;
}

#bouton-confirmation {
  margin: 100px auto 20px;
}

#bouton-confirmation a,
#bouton-confirmation a:visited{
  color: inherit;
  font-weight: inherit;
}

#bouton-confirmation:hover,
form[action='confirmation.php'] input[type="submit"]:hover {
  box-shadow: 1px 1px 2px 1px var(--bleu-canard);
}

#main{
  font-family: "BubblerOne";
  margin: 0px auto 100px;
  max-width: 850px;
  font-size: 24px;
  padding: 0 20px;
}

#index, #programme {
  text-align: center;
}

#main #index > p {
 margin: 30px 0px;
 font-size: 1.2em
}

#main #remerciement p {
  margin: 8px 0px;
}

#main p {
  margin: 0px;
}

#main h2, #photos h2 {
  margin: 100px 0px 40px;
  line-height: 1em;

  display: flex;
  justify-content: center;
  flex-wrap:wrap;
}

#main ul {
  padding-left: 20px;
}

h2 span {
  margin:0px 20px;
}

h2 span:first-child {
  font-weight: bold;
  color: var(--quasi-noir);
  font-size: 90%;
}




.courriel::after {
  content:"@";
}

.courriel, .courriel ~ span {
  /* Monospace stack via http://sebsauvage.net/links/?pVt-uA*/
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  font-size: 0.9em;
}

header {
  text-align: center;
}

header h1 {
  text-align: center;
  font-family: 'Mathilde';
  font-size:200px;
  line-height: 140px;
  color: var(--bleu-canard);
  font-weight: normal;
  margin: 40px 0px;
  margin-bottom: 30px; /* La police prend beaucoup moins de place que sa taille, donc ça donne l'impression d'avoir une marge en bas, qui est largement suffisante */
}

header h1 a {
  /*
  Les caractères s'échappent de leur boite, ce qui fait foirer le centrage.
  Je rajoute du padding pour que la taille de la boite soit exactement égale à la taille prise par les caractères.
  Ainsi je répare le centrage.
  */
  padding-left: 35px;
  padding-right: 10px;
}


/*
  Le hack ci-dessus n'est pas suffisant pour les écrans de grande taille,
  car pour le ressenti du centrage, je n'est pas tant le centrage global du texte qui est important,
  mais surtout le centrage de l'esperluette
  j'augmente donc le padding à gauche pour que l'effet visuel du centrage soit meilleur
*/
@media (min-width: 750px) {
  header h1 a {
    padding-left: 65px;
  }
}
@media (min-width: 900px) {
  header h1 a {
    padding-left: 90px;
  }
}

#esperluette{
  color: var(--gris);
}

header h2 {
  color: var(--gris-sombre);
  font-variant: normal;
  margin-top: 0px;
  margin-bottom: 60px;
}

nav {
  font-family: 'BubblerOne';
  font-variant: small-caps;
  font-size: 45px;
  margin-bottom: 100px;
}

h2{
  font-family: 'BubblerOne';
  font-size: 45px;
  font-weight: normal;
  text-align: center;
  letter-spacing: -2px;
  word-spacing: 6px;
  margin-bottom: 70px;
}

#main h3, #main h4 {
  margin-top: 70px;
}

p {
  font-family: 'BubblerOne';
}

nav li {
  list-style: none;
  padding: 0px 10px;
  margin-bottom: 15px;
}

nav ul {
  display: flex;
  justify-content: space-around;
  flex-wrap:wrap;
  margin-top:0px;
  padding:0px;
}

#etoile {
  text-align: center;
  font-size: 0.8em;
}

#mapid {
  width:100%;
  height:400px;
  margin: 50px 0px;
}

form {

}

.form-title{
  display: table-row;
}

.form-title > span {
  display: table-cell;
}

label {
  display: block;
  margin-left: 50px;
}

textarea {
  width: 100%;
  height: 250px;
  padding: 15px;
  box-sizing: border-box;
}

#information {
  display: table;
  border-spacing: 25px 10px;
}


#information label {
  display: table-row;
}

#information label > span,
#information input {
  display: table-cell;
}

#information input {
  font-weight: bold;
  font-family: "BubblerOne";
  font-size: 1em;
}

#information label > span:first-child {
  text-align: right;
}

#information label > span:last-child {
  text-align: left;
}

.form-error {
  margin: 30px 80px;
  padding: 20px 50px;
  background-color: #ffb5a9;
  border-radius: 5px;
}

.form-error h5 {
  margin: 0px;
}


#photo-accueil {
  max-width: 100%;
}

#recap-success td:nth-child(2) {
  padding-left: 10px;
}


@media (min-width: 1300px) {
  #liste-mariage {
    margin: 50px -200px 0px;
  }
}

.categorie-cadeaux-mariage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}

.elem-liste-mariage {
  margin:30px 15px 60px 15px;
  width:350px;
  text-align: center;
}

.elem-liste-mariage .petite-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 270px;
}

.elem-liste-mariage h1 {
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 0px;
  margin-top: 7px;
}

#cadeau-mariage {
  text-align: center;
}

#cadeau-mariage img {
  display: block;
  margin:0px auto;
}
/*
  l'id #main est là juste pour que la précédence du selecteur soit plus fort que `#main a`
*/
#main .elem-liste-mariage .bouton-cadeau {
  margin-top: 7px;
  display: inline-block;
}

/*
  l'id #main est là juste pour que la précédence du selecteur soit plus fort que `#main a`
*/
#main .elem-liste-mariage .bouton-cadeau,
#cadeau-mariage .bouton-cadeau {
  color: initial;
  font-size: 30px;
  font-weight: normal;
  border-radius: 5px;
  background-color: var(--bleu-canard);
  padding: 6px 20px 7px;
  text-align: center;
  box-shadow: 2px 2px 2px 1px var(--bleu-ciel);
}

#main .elem-liste-mariage .bouton-cadeau:hover,
#cadeau-mariage .bouton-cadeau:hover {
  box-shadow: 1px 1px 2px 1px var(--bleu-canard);
}

#cadeau-mariage .bouton-cadeau {
  display: block;
  margin: 50px auto 0px;
  font-family: "BubblerOne";
}

#cadeau-mariage label{
  display: block;
  text-align: left;
  margin: 5px 0px;
}

#cadeau-mariage label:first-of-type {
  margin-top: 50px;
}

#cadeau-mariage label > input {
  font-size: 0.8em;
  text-align: center;
}

#cadeau-mariage textarea {
  font-size: 0.8em;
}

#cadeau-mariage label > input[name="participation"] {
  width: 70px;
}

#cadeau-mariage progress{
  margin: 20px 0px 10px;
}

#cadeau-mariage cite {
  margin-top: 10px;
  display: block;
  text-align: center;
}

#cadeau-mariage img {
  max-width: 100%;
}


#plan {
  text-align: center;
}

#plan img {
  max-width: 100%;
}

#photos {
  margin: auto;
  width: 95vw;
}

.pagination > ul {
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
  margin: 50px 0px;
  padding: 0px;
}

#gallery-photomaton,
#gallery-invites,
#gallery-photographe,
#gallery-nz {
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
}

/*
  C'est une propriété non-standard qui marche uniquement pour firefox,
  mais puisque je ne peux pas faire la rotation automatiquement côté serveur (la lib jpeg Rust ne permet pas ça),
  je me rabats sur ça.
*/
#gallery-invites img {
  image-orientation: from-image;
}

#gallery-photomaton a {
  height:267px;
  margin: 2px;
}

#gallery-photographe a,
#gallery-invites a,
#gallery-nz a  {
  margin: 2px;
  display: flex;
  align-items: center;
}

.pagination li {
  list-style: none;
  text-align: center;
}

.pagination li:first-child,
.pagination li:last-child{
  width: 170px;
}
.pagination li:nth-child(2),
.pagination li:nth-child(4){
  width: 120px;
}
.pagination li:nth-child(3){
  width: 90px;
}

.pagination a {
  color: var(--bleu-canard);
}

.pagination a > span{
  border-bottom: 1px solid var(--bleu-canard);
  padding-bottom: 1px;
}

#upload {
  max-width:1000px;
  margin:60px auto;
}

#upload input[type="submit"] {
  border-radius: 5px;
  background-color: var(--bleu-canard-clair);
  max-width: 300px;
  padding: 6px 20px 7px;
  text-align: center;
  font-size: 30px;
  font-family: 'BubblerOne';
  box-shadow: 2px 2px 2px 1px var(--bleu-ciel);
  line-height: initial;
  margin: 30px 0px;
}

#upload p {
  font-size: 1.5em;
}

/*

#gallery-photo a {
  display: flex;
  align-items: center;
  justify-content: space-around;
} */
/*
footer {
  max-width: 1080px;
  height: 180px;
  margin: 0px auto;
  background-image: url("bas_de_page.png");
}
*/