/* ============================================================
   SOMMAIRE
   1. Polices et base de la page
   2. Bandeau du haut et menu
   3. Page d'accueil (logo + 4 blocs)
   4. Titre des pages de rubrique
   5. Photos et dessins
   6. Textes
   7. Revendications
   8. Zoom sur une image
   9. Bas de page
   10. Mobile
   ============================================================ */


/* ------ 1. Polices et base de la page ------ */

@font-face {
  font-family: "Anton";
  src: url("assets/fonts/anton.woff2");
}

@font-face {
  font-family: "Special Elite";
  src: url("assets/fonts/special-elite.woff2");
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #191010;
  background-image: url("assets/website/fond.webp"), url("assets/website/fond_lowres.webp");

  background-attachment: fixed, fixed;
  background-position-x: center, center;
  background-position-y: top, top;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, 1920px 1076px;
  color: #141414;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 17px;
  line-height: 1.5;
}

a {
  color: #141414;
}

img {
  max-width: 100%;
}

.page {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.contenu {
  flex: 1;
  width: 90%;
  max-width: 1150px;
  margin: auto auto;
}

.button-general {
  top: 15px;
  right: 15px;
  background-color: #ece6d6;
  border: 3px solid #141414;
  font-family: "Anton", Impact, sans-serif;
  font-size: 18px;
  padding: 4px 14px;
  cursor: pointer;
}



/* ------ 2. Bandeau du haut et menu ------ */

.bandeau {
  background-color: #141414;
  color: #c4f000;
  font-family: "Anton", Impact, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 0;
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: clip;
  transform: rotate(-0.6deg);
}

.bandeau-texte {
  display: inline-block;
  padding-left: 100%;
  animation: defile 40s linear infinite;
}

@keyframes defile {
  to { transform: translateX(-100%); }
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 5% 0 5%;
  font-family: "Anton", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.topbar-nom {
  text-decoration: none;
  color: aliceblue;
  font-size: 18px;
}

.menu {
  display: flex;
}

.menu-lien {
  text-decoration: none;
  font-size: 14px;
  padding: 2px 10px;
  margin-left: 8px;
  border: 2px solid #141414;
  background-color: #ece6d6;
}

.menu-lien:hover {
  background-color: #141414;
  color: #ece6d6;
}

.menu-actif {
  background-color: #141414;
  color: #ece6d6;
}


/* ------ 3. Page d'accueil ------ */

.accueil {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
}

.colonne {
  width: 30%;
}

.centre {
  width: 34%;
}

.carte-logo {
  position: relative;
  background-color: white;
  border: 3px solid #141414;
  box-shadow: 10px 10px 0 #141414;
  padding: 20px;
  text-align: center;
  transform: rotate(-2deg);
}

.logo {
  width: 100%;
}

.slogan {
  font-family: "Anton", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 18px;
  margin: 5px 0 0 0;
}

.ruban1 {
  position: absolute;
  top: -14px;
  left: -30px;
  width: 110px;
  height: 30px;
  background-color: rgba(255, 220, 90, 0.75);
  transform: rotate(-35deg);
}

.ruban2 {
  position: absolute;
  bottom: -10px;
  right: -30px;
  width: 110px;
  height: 30px;
  background-color: rgba(255, 220, 90, 0.75);
  transform: rotate(-30deg);
}

.bloc {
  display: block;
  position: relative;
  text-decoration: none;
  border: 3px solid #141414;
  box-shadow: 7px 7px 0 #141414;
  padding: 20px;
  margin: 35px 0;
}

.bloc:hover {
  transform: rotate(0deg);
  box-shadow: 12px 12px 0 #141414;
}

.bloc-rose { background-color: #ff2d7a; }
.bloc-vert { background-color: #c4f000; }
.bloc-bleu { background-color: #1aa0e8; }
.bloc-orange {
  background-color: #e8881a;
}

.bloc-noir {
  padding: 5px;
  margin: 10px 0;
  background-color: #141414;
  color: #ece6d6;
  box-shadow: 7px 7px 0 #ff2d7a;
}

.bloc-noir:hover {
  box-shadow: 12px 12px 0 #ff2d7a;
}

.penche1 { transform: rotate(-2deg); }
.penche2 { transform: rotate(1.8deg); }
.penche3 { transform: rotate(-1deg); }

.bloc-num {
  font-size: 15px;
}

.bloc-titre {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 38px;
  line-height: 1;
  margin: 5px 0;
}

.bloc-texte {
  margin: 0 0 12px 0;
  font-size: 15px;
}

.bloc-nb {
  display: inline-block;
  background-color: #141414;
  color: #ece6d6;
  font-family: "Anton", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  padding: 2px 10px;
}

.bloc-noir .bloc-nb {
  background-color: #ece6d6;
  color: #141414;
}

.bouton {
  display: inline-block;
  text-decoration: none;
  font-family: "Anton", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 18px;
  margin-bottom: 20px;
  border: 3px solid #141414;
  background-color: #c4f000;
  box-shadow: 5px 5px 0 #141414;
}

.bouton:hover {
  background-color: #ff2d7a;
}

.cache {
  display: none;
}


/* ------ 4. Titre des pages de rubrique ------ */

.entete-page {
  padding: 45px 0 20px 0;
  color: antiquewhite;
}

.num-page {
  font-size: 16px;
}

.titre-page {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 110px;
  line-height: 1;
  margin: 5px 0 10px 0;
}

.titre-rose { text-shadow: 5px 5px 0 #ff2d7a; }
.titre-vert { text-shadow: 5px 5px 0 #c4f000; }
.titre-bleu { text-shadow: 5px 5px 0 #1aa0e8; }*
.titre-orange { text-shadow: 5px 5px 0 #e8881a; }

.intro {
  max-width: 480px;
  margin: 0;
}


/* ------ 5. Photos et dessins ------ */

.galerie {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 50px;
}

.photo {
  position: relative;
  width: 30%;
  margin: 15px 1.5%;
  padding: 10px;
  background-color: white;
  border: 3px solid #141414;
  box-shadow: 6px 6px 0 #141414;
}

.photo:hover {
  transform: rotate(0deg);
  box-shadow: 10px 10px 0 #141414;
}

.photo-img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  border: 2px solid #141414;
  cursor: pointer;
}

.photo-legende {
  margin: 8px 0 0 0;
  font-size: 15px;
}

.photo-infos {
  margin: 0;
  font-size: 13px;
  color: #666666;
}


/* ------ 6. Textes ------ */

.liste-textes {
  max-width: 750px;
  padding-bottom: 50px;
}

.texte {
  position: relative;
  background-color: white;
  border: 3px solid #141414;
  box-shadow: 6px 6px 0 #141414;
  margin-bottom: 22px;
}

.texte-titre {
  padding: 15px 55px 15px 20px;
  cursor: pointer;
}

.texte-titre:hover {
  background-color: #c4f000;
}

.texte-nom {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1.1;
  margin: 0;
}

.texte-infos {
  font-size: 14px;
  color: #666666;
}

.texte-plus {
  position: absolute;
  top: 12px;
  right: 18px;
  font-family: "Anton", Impact, sans-serif;
  font-size: 30px;
}

.texte-corps {
  display: none;
  padding: 5px 20px 15px 20px;
  border-top: 3px solid #141414;
}

.texte.ouvert .texte-corps {
  display: block;
}

.texte.ouvert .texte-titre {
  background-color: #c4f000;
}


/* ------ 7. Revendications ------ */

.liste-revs {
  max-width: 900px;
  padding-bottom: 50px;
}

.rev {
  position: relative;
  display: flex;
  align-items: flex-start;
  background-color: white;
  border: 3px solid #141414;
  box-shadow: 6px 6px 0 #ff2d7a;
  padding: 15px 20px;
  margin-bottom: 30px;
}

.rev-num {
  font-family: "Anton", Impact, sans-serif;
  font-size: 64px;
  line-height: 1;
  color: #ff2d7a;
  margin-right: 20px;
}

.rev-titre {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1.1;
  margin: 0;
}

.rev-texte {
  margin: 5px 0 0 0;
}

/* ------ Evenements ------ */
.liste-events {
  max-width: 750px;
  padding-bottom: 50px;
}

.event {
  position: relative;
  background-color: white;
  border: 3px solid #141414;
  box-shadow: 6px 6px 0 #141414;
  margin-bottom: 22px;
}

.event-passed {
  position: relative;
  background-color: rgb(145, 142, 142);
  border: 3px solid #141414;
  box-shadow: 6px 6px 0 #141414;
  margin-bottom: 22px;
}

.event-today {
  position: relative;
  background-color: rgb(133, 230, 151);
  border: 3px solid #141414;
  box-shadow: 6px 6px 0 #141414;
  margin-bottom: 22px;
}

.event-titre {
  padding: 15px 55px 15px 20px;
  cursor: pointer;
}

.event-titre:hover {
  background-color: #c4f000;
}

.event-nom {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1.1;
  margin: 0;
}

.event-infos {
  font-size: 14px;
  color: #666666;
}

.event-plus {
  position: absolute;
  top: 12px;
  right: 18px;
  font-family: "Anton", Impact, sans-serif;
  font-size: 30px;
}

.event-corps {
  display: none;
  padding: 5px 20px 15px 20px;
  border-top: 3px solid #141414;
}

.event.ouvert .event-corps, .event-passed.ouvert .event-corps, .event-today.ouvert .event-corps {
  display: block;
}

.event.ouvert .event-titre, .event-passed.ouvert .event-titre, .event-today.ouvert .event-titre {
  background-color: #c4f000;
}



/* ------ 8. Zoom sur une image ------ */

.zoom {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(20, 20, 20, 0.88);
  text-align: center;
  z-index: 10;
}

.zoom.ouvert {
  display: block;
}

.zoom-img {
  max-width: 90%;
  max-height: 78%;
  margin-top: 6%;
  border: 3px solid #ece6d6;
}

.zoom-legende {
  color: #ece6d6;
}

.zoom-fermer {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #ece6d6;
  border: 3px solid #141414;
  font-family: "Anton", Impact, sans-serif;
  font-size: 18px;
  padding: 4px 14px;
  cursor: pointer;
}


/* ------ 9. Bas de page ------ */

.pied {
  background-color: #e2dac5;
  border-top: 3px solid #141414;
  padding: 14px 0;
  text-align: center;
  font-size: 14px;
  width:100%;
}


/* ------ 10. Mobile ------ */

@media (max-width: 860px) {
  .accueil { flex-direction: column; }
  .centre { order: -1; width: 70%; max-width: 340px; margin-bottom: 20px; }
  .colonne { width: 100%; }
  .titre-page { font-size: 70px; }
  .photo { width: 46%; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .menu { margin-top: 10px; flex-wrap: wrap; }
  .menu-lien { margin: 0 8px 6px 0; }
}

@media (max-width: 520px) {
  .photo { width: 100%; margin: 15px 0; }
  .titre-page { font-size: 52px; }
  .bloc-titre { font-size: 32px; }
  .rev { flex-direction: column; }
  .bandeau-texte { animation: none; padding-left: 0; }
}