/* auteur: pierre */
/* date de création: 12/02/2026 */

/* general */

* {
  box-sizing: border-box;
}

.wrapper {
  width: 70vw;
  margin: auto;
}

.wrapper > * {
  border-radius: 5px;
  padding: 10px;
}

/* police (acab) */

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
:root { font-family: InterVariable, sans-serif; }
}

li::first-letter {
  color: #E90C00;
  font-weight: bold;
}

/* apparance des liens */

a:link {
  text-decoration: none;
  color: black;
}

a:hover,
a:focus {
  color: red;
}

a:active {
  color: red;
}

/* Organisation des elements et classes en grille */

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.logo {
  grid-column: 1 / 3;
  grid-row: 1;
}

.vide {
  grid-column: 11 /13;
  grid-row: 1;
}

.navhaut {
  grid-column: 1 / 13;
  grid-row: 2;
}

.main {
  grid-column: 1 / 13;
  grid-row: 3;
}

.contenu {
  grid-column: 1 / 9;
  grid-row: 3;
}

.navbas {
  grid-column: 1 / 13;
  grid-row: 4;
}

#banniere {
grid-column: 3 / 11;
grid-row: 1;
}

#pancarte {
  grid-column: 9 / 13;
  grid-row: 3;
}

@media only screen and (max-width: 1200px) {

  .logo {
    grid-column: 1 / 4;
    grid-row: 1;
  }
  #banniere {
  grid-column: 4 / 13;
  grid-row: 1;
  }
}

@media only screen and (max-width: 760px) {

  .wrapper {
    width: unset;
  }
  .logo {
    grid-column: 1 / 13;
    grid-row: 1;
  }
  #banniere {
    grid-column: 1 / 13;
    grid-row: 2;
  }
  .navhaut {
    grid-column: 1 / 13;
    grid-row: 3;
  }
  .main {
    grid-column: 1 / 13;
    grid-row: 4;
  }
  .contenu {
    grid-column: 1 / 13;
    grid-row: 4;
  }
  #pancarte {
  grid-column: 1 / 13;
  grid-row: 5;
  }
  .navbas {
    grid-column: 1 / 13;
    grid-row: 6;
  }
}

/* logo "Centre Ascaso Durruti" et banniere*/

.logo {
  font-size: 240%;
  font-weight: bold;
  align-self: center;
}

.cap {
  color: #BA1010;
  text-shadow: 1px 1px 3px black;
}

#banniere {
  align-self: center;
  margin: auto;
}


/* barres de navigation */

.nav li {
  font-size: 120%;
  font-weight: bold;
  list-style: none;
  margin: 0 5px;
  padding: 0;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

nav {
  background-color:  #ffc99d;
}


/* contenu */

.contenu li {
  padding: 1% 0;
  list-style: none;
  font-size: 110%
}

.contenu ul {
  margin: 0;
  padding: 0;
}

.box {
  display: flex;
  padding: 10px;
  margin: 10px;
  align-items: center;
  background-color:  #ffd7b7;
}

.titre {
  text-align: center;
  text-decoration-line: underline;
}

.miniature {
  margin: 10px;
}

/* accessibilité, responsivité */

img,
picture,
video {
  max-width: 100%;
}

  /* pour les petits écrans */
@media only screen and (max-width: 760px) {

  #banniere {
    margin: 0;
    padding: 0;
  }

  #pancarte {
    margin: 0;
    padding: 0;
  }

  .navbas .nav {
    flex-direction: column;
    font-size: 90%;
  }

}

  /* pour les grands écrans */
@media only screen and (min-width: 2000px) {

  .nav {
    font-size: 140%;
  }

  .contenu {
    font-size: 140%
  }

  .logo {
    font-size: 270%
  }

}