:root {

  --spacing: .5rem;

  --black: #000;
  --white: #FFF;

  --dark_grey: #222;
  --blue_velvet: #11002b;

  --orange: #ff5f4e;
  --blue: #002c4f;

}


/* FONTS */
/* name: font-size / line-height / font-family */
body {
  font-family: "ibm_plex_sans";
  color: var(--blue_velvet);
}
h2 {
  font: 1.5rem / 1.8rem "ibm_plex_sans";
  font-weight: 600;
}
section#presentation {
  font: 1.8rem / 2rem "ibm_plex_sans";
  font-weight: 400;
}
section#wrapper-contact p {
  font: 1.2rem / 1.4rem "ibm_plex_sans";
  font-weight: 400;
}
section#legal_notice {
  font: 0.8rem / 1.0rem "ibm_plex_sans";
  font-weight: 400;
}



header {
  display: flex; justify-content: space-between;
  margin: calc(2 * var(--spacing)); margin-bottom: 0px;
  padding-bottom: calc(2 * var(--spacing));
  border-bottom: 1px solid var(--blue_velvet);
}
header #logo {
  padding-bottom: var(--spacing);
}
header #logo img {
  width: 9rem;
}


section#presentation {
  padding: calc(2 * var(--spacing));
}
section#presentation p {
  max-width: 75rem;
}


/* PROJETS */

section#projets {
  padding: calc(.5 * var(--spacing));
  background-color: var(--blue_velvet);
}
section#projets #tags {
  width: 20rem; flex-shrink: 0;
  color: var(--white);
  padding: 0px var(--spacing);
  display: none;
}
section#projets #tags ul {
  list-style: inside;
  list-style-type: disclosure-closed;
  font: .9rem / 1.4rem "IBMPlexMono";
  font-style: italic;
  font-weight: bold;
}
section#projets #grid {
  --col_width: 20rem;
  --col_gap: calc(.5 * var(--spacing));
  --min_cols: 1;
  --max_cols: 5;
  display: grid;
  grid-gap: var(--col_gap);
  grid-template-columns: repeat(auto-fill, minmax(min((100%/var(--min_cols) - var(--col_gap)*(var(--min_cols) - 1)/var(--min_cols)), max(var(--col_width), (100%/var(--max_cols) - var(--col_gap)*(var(--max_cols) - 1)/var(--max_cols)))), 1fr));
}
section#projets .projet {
  display: flex; flex-direction: column;
  position: relative;
}
section#projets .projet figure {
  order: -1;
  aspect-ratio: 1/1;
}
section#projets .projet figure img {
  object-fit: cover;
  width: 100%; height: 100%;
}
section#projets .projet article {
  display: none;
  padding: calc(1 * var(--spacing));
  padding-top: calc(.5 * var(--spacing));
  position: absolute;

  background-color: var(--blue_velvet);
  color: var(--white);
}
section#projets .projet:hover article {
  display: block;
}
section#projets .projet article h3 {
  font: 0.9rem / 1rem "ibm_plex_sans";
  font-weight: 600;
}
section#projets .projet article p {
  font: 0.8rem / 1rem "ibm_plex_sans";
  display: none;

}
section#projets .projet {
  text-decoration: none;
}



/* PARTENAIRES */
section#partenaires {
  padding: calc(2 * var(--spacing));
  padding-top: calc(4 * var(--spacing));
}



/* LOGOS */
.list_logos {
  max-width: 75%;
  padding: calc(2 * var(--spacing));
  margin: auto;
  display: flex; justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
}
.list_logos figure {
  list-style: none;
}
.list_logos figure img {
  max-width: 100%;
  height: 50px;
}


/* CONTACT */

section#contact {
  padding: calc(2 * var(--spacing));

}
section#contact h2 {
  padding-bottom: var(--spacing);
}
section#contact a {
  text-decoration: none;
}
pre, pre * {
  font-family: "Protocole";
  font-size: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  text-decoration: none;
}
section#contact #legal_notice {
  margin-top: calc(4 * var(--spacing));
  display: flex; gap: calc(2 * var(--spacing));
  font: 0.9rem / 1rem "ibm_plex_sans";
}

section#contact #legal_notice a {
  text-decoration: underline;
}


/* WRAPPER CONTACT-A PROPOS-DESSIN */

section#wrapper-contact {
  display: flex;
  gap: calc(4 * var(--spacing));
  border-bottom: 1px solid var(--blue_velvet);
  margin: calc(2 * var(--spacing)); margin-bottom: 0px;
  padding-bottom: calc(2 * var(--spacing));
}


/* CONTACT */
div#contact {
 max-width: 75rem;
}
div#contact h2 {
  padding-bottom: var(--spacing);
}
div#contact a {
  text-decoration: underline;
}



/*PRE TEXTE*/
pre, pre * {
  font-family: "Protocole";
  font-size: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
}


section#contact #legal_notice {
  margin-top: calc(4 * var(--spacing));
  display: flex; gap: calc(2 * var(--spacing));
  font: 0.9rem / 1rem "ibm_plex_sans";
}


/*LEGAL*/
#legal_notice{
   padding: calc(2 * var(--spacing));
}
#legal_notice a {
  text-decoration: none;
}
/* Detail PROJET */

section#projet {
  padding: calc(2 * var(--spacing));
}
section#projet h2 {
  padding-bottom: var(--spacing);
}
section#projet p {
  max-width: 55rem;
}
.galerie {
  padding: calc(.5 * var(--spacing));
  background-color: var(--blue_velvet);

  --col_width: 20rem;
  --col_gap: calc(.5 * var(--spacing));
  --min_cols: 1;
  --max_cols: 2;
  display: grid;
  grid-gap: var(--col_gap);
  grid-template-columns: repeat(auto-fill, minmax(min((100%/var(--min_cols) - var(--col_gap)*(var(--min_cols) - 1)/var(--min_cols)), max(var(--col_width), (100%/var(--max_cols) - var(--col_gap)*(var(--max_cols) - 1)/var(--max_cols)))), 1fr));
}