:root {
  --vert: #0db208;
  --rouge: #e20544;
  --blanc:#FFFFFF;
  --blancTransp:rgba(255,255,255, 0.5);
  --noir:#000000;
  --noirTransp: rgba(0,0,0,0.5);

  --font-body: 'Arial', sans-serif;
}

html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--noir);
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: 1rem;

  background-image: url('img/fond/fond01.png');
  background-repeat: repeat;
  background-attachment: fixed;

}

header {
  width: 100%;
  height: 120px;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;

  background-image: url('img/MCZheader2.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.couleurChng {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}
.couleurChng a {
  text-decoration: none;
  display: inline-block;
  overflow: hidden;
  width: 25px;
  height: 25px;
  border: 2px solid var(--blanc);
  margin: 5px -5px 0 5px;
  opacity:0.5;
}
.couleurChng a:hover {
  opacity:1;
}

main {
  width: 100%;
  padding: 1rem;
  margin-top: 120px;

  position: relative;
  z-index: 10;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 colonnes égales */
  grid-template-rows: repeat(12, 1fr);   /* 12 lignes égales */
  gap: 1rem;
  width: 100%;
}

.grid-container a {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;


  background-color: var(--blanc);

  width: 100%;
  height: 100%;

  color: var(--color-bg);
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;

  cursor: pointer;
}
.grid-container a:hover {
  transform: scale(1.03);
  opacity: 1;
  background-color: var(--noirTransp);
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.contact-img-base {
background-color:var(--color-bg);
}
.contact-img-hover {
  display: none;
}
a:hover .contact-img-base {
  display: none;
}
a:hover .contact-img-hover {
  display: inline;
}

/* 1ère zone 4x4 en haut à gauche */
.zone1 {
  grid-column: 1 / span 4; /* colonne 1 à 4 */
  grid-row: 1 / span 4;    /* ligne 1 à 4 */
  padding: 1rem;

  position: relative;
}
.zone1:hover {
  padding: 0;
}
.legendeTuile {
  position: absolute;
  left: 0;
  bottom: 0.4rem;
  width: 90%;
  padding: 0.3rem 0 0.3rem 1rem;
  color: var(--blanc);
  font-weight: bolder;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.legendeImg {
  text-transform:uppercase;
  font-weight:bolder;
  text-align:center;
  width: 100%;
}
/* À côté, deux carrés 2x2 (zone2 et zone3) */
.zone2 {
  grid-column: 5 / span 2; /* colonnes 5 et 6 */
  grid-row: 1 / span 2;    /* lignes 1 et 2 */
  position: relative;
}
.zone3 {
  grid-column: 5 / span 2;
  grid-row: 3 / span 2;
  position: relative;
}
/* Rectangle 1x6 sous la zone1+zones 2&3 (ligne 5 colonne 1 à 6) */
.zone4 {
  grid-column: 1 / span 6;
  grid-row: 5 / span 1;
}
/* Sous, 2 rectangles 1x3 côte à côte (ligne 6) */
.zone5 {
  grid-column: 1 / span 3;
  grid-row: 6 / span 1;
}
.zone6 {
  grid-column: 4 / span 3;
  grid-row: 6 / span 1;
}


/* Puis 3 carrés 2x2 (lignes 7-8) côte à côte */
.zone7 {
  grid-column: 1 / span 2;
  grid-row: 7 / span 3;
  position: relative;
}
.zone8 {
  grid-column: 3 / span 2;
  grid-row: 7 / span 3;
  position: relative;
}
.zone9 {
  grid-column: 5 / span 2;
  grid-row: 7 / span 3;
  position: relative;
}


/* Rectangle 1x6 sur la ligne 10 */
.zone13 {
  grid-column: 1 / span 6;
  grid-row: 10 / span 1;
}
/* Puis 2 rectangles 1x3 (ligne 11) */
.zone14 {
  grid-column: 1 / span 3;
  grid-row: 11;
}
.zone15 {
  grid-column: 4 / span 3;
  grid-row: 11;
}
/* Rectangle 1x6 en dernier (ligne 12) */
.zone16 {
  grid-column: 1 / span 3;
  grid-row: 12;
  background-color: var(--blanc);

}
.zone17 {
  grid-column: 4 / span 3;
  grid-row: 12;
  background-color: var(--blanc);

}
.zone4, .zone14, .zone15, .zone16, .zone17 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  row-gap: 5px;
  column-gap: 5px;
}
.zone4 div, .zone14 div, .zone15 div, .zone16 div, .zone17 div {
  line-height: 0.9rem;
  text-align:left;
}
.grid-container .zone7, .grid-container .zone8, .grid-container .zone9 {
  justify-content:center;
  align-content: flex-start;
}
.zone7 .label2, .zone8 .label2, .zone9 .label2 {
  width: 100%;
  text-align: center;
  margin-top: 0%;
  font-size: 0.9rem;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  row-gap: 0px;
  column-gap: 0px;

}
.miniTexte {
  font-size: 0.8rem;
}
.grdTexte {
  font-size: 1.5rem;
}
.capital {
  text-transform: capitalize;
}
.tailleIconeIndex {
  font-size: 2rem;
  padding-right: 2px;
}
.voir {
  padding: 0.75rem !important;
}
.voir a {
  text-decoration: none !important;
  color: var(--blanc) !important;
}

footer {
  width: 100%;
  background: var(--noirTransp);
  color: var(--color-bg);
  text-align: center;
  padding: 1rem;
  font-size: 0.8rem;
  margin: 0.5rem 0 0.5rem 0;
}
footer a {
  text-decoration: none;
  color: var(--color-bg);
}
footer a:hover {
  text-decoration: none;
  color: var(--accent);
}



/* MENU */
/* Masquer la checkbox */
.menu-toggle {
  display: none;
}
/* Bouton burger rond en bas à droite */
.burger-btn {
  position: fixed;
  bottom: 15px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  z-index: 1002;
  box-shadow: 0 4px 22px var(--noirTransp);
}
/* 3 traits centraux */
.burger-btn span {
  display: block;
  width: 25px;
  height: 4px;
  background: var(--blanc);
  border-radius: 2px;
  transition: .4s cubic-bezier(.87,-0.41,.19,1.44) all;
}

/* Animation croix quand menu ouvert */
.menu-toggle:checked + .burger-btn span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-toggle:checked + .burger-btn span:nth-child(2) {
  opacity: 0;
}
.menu-toggle:checked + .burger-btn span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Menu fullscreen masqué par défaut */
.burger-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--accent);
  color: var(--blanc);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  overflow: scroll;

}

/* Menu affiché quand checkbox cochée */
.menu-toggle:checked ~ .burger-menu {
  opacity: 1;
  pointer-events: auto;
}

/* Contenu du menu */
.imgMenu {
  padding:0 0 0rem 0;
  flex: 1 1 100%;
}
.menu-content {
  width: 95vw;
  padding: 0;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;

  gap: 0.4rem;
}

.burger-menu a {
  font-size: 1.4rem;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 1px;
  text-align: right;
  font-weight: bolder;
  margin-bottom: 0rem;
  padding: .5rem .8rem;
  transition: background .2s;
  display: block;
  width: 100%;
  background-color: var(--blanc);
}

.burger-menu a:hover,
.burger-menu a:focus {
  background: var(--noirTransp);
  outline: none;
}

.marginBottomMenuLien {
  margin-bottom: 0.25rem;
}

/* --------------- recherche --------------- */
.motRech {
  font-weight: bolder;
  text-decoration: underline;
  text-transform: uppercase;
}
.conteneurRechercher {
  height:3.5rem;
}
.rechercher {
  overflow: hidden;
  font-size: 0.75em;
  width: 100%;
  height: 100%;
}
.rechercher input[type=text] {
  font-size: 1.2rem;
  font-weight: bolder;
  padding: 3%;
  width: 80%;
  height: 100%;
  float: left;
	background-color: var(--blanc);
  color: var(--color-bg);
  border-radius: 0px;
  border: solid 0px var(--color-bg);
  text-align: right;
}
.rechercher input[type=text]:focus {
	background-color: var(--blanc);
	color: var(--color-bg);
}
.rechercher input[type=text]::placeholder {
	color: var(--color-bg);
  opacity: 0.5;
}
.rechercher input[type=submit] {
  float: left;
  width: 20%;
  height: 100%;
  color: var(--color-bg);
  font-weight: bolder;
  font-size: 1rem;
  padding: 3%;
  background-color: var(--noirTransp);
  border-radius: 0px;
  border: solid 0px var(--color-bg);
}
.loupe {
	background-image: url('img/loupe2.svg');
 	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.rectBlc {
  width: 100%;
  padding: 1rem;
  margin: 0 0 1rem 0;
  background-color: var(--blanc);
  color: var(--color-bg);
  text-align: justify;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  row-gap: 1rem;
  column-gap: 1rem;
}
.rectBlc a {
  color: var(--color-bg);
  text-decoration: underline;
  font-weight: bolder;
}
.rectBlc a:hover {
  text-decoration: none;
  color: var(--accent);
  text-transform: uppercase;

}




.connexion {
  width: 100%;
}

.connexion form {
	width: 100%;
  padding: 0;
}
.connexion form input {
	display: block;
	border:1px solid var(--blanc);
	font-size: 1rem;
	padding: 1rem;
	margin-bottom: 1rem;
	width: 100%;
  background-color: var(--blanc);
  color: var(--color-bg);
}
.connexion form input[type="submit"] {
  background-color: var(--vert);
	border: 2px solid var(--vert);
	color: var(--blanc);
  cursor: pointer;
}

.messageConnection {
  width: 100%;
  padding: 1rem;
  margin: 0 0 1rem 0;
  text-align: justify;
}
.messageConnection a {
  color: var(--blanc);
  text-decoration: underline;
  font-weight: bolder;
}
.messageConnection a:hover {
  text-decoration: none;
  color: var(--accent);
  text-transform: uppercase;
}
.bgVert {
  background-color: var(--vert);
  color: var(--blanc);
}
.bgRouge {
  background-color: var(--rouge);
  color: var(--blanc);
}
.gras {
  font-weight: bolder;
}
.souligne{
  text-decoration: underline;
}




.formContact {
  width: 100%;
  overflow: auto;
}
.formContact select {
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: var(--blanc);
  font-size: 1rem;
  text-align: left;
  color: var(--color-bg);
}
.formContact input {
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: var(--blanc);
  font-size: 1rem;
  text-align: left;
}
.formContact input::placeholder {
	color: var(--color-bg);
  opacity: 0.5;
  font-weight: bolder;
}

.formContact textarea {
  width: 100%;
  background-color: var(--blanc);
  min-height: 250px;
  color: var(--color-bg);
  margin-bottom: 1rem;
}
.formContact .rectBlc {
  display: block;
  overflow: auto;
}
.formContact input[type="checkbox"] {
  width: 5%;
}
.formContact .rectBlc div {
  width: 90%;
  float: right;
}

.formContact input[type="submit"] {
  background-color: var(--vert);
	border: 2px solid var(--vert);
	color: var(--blanc);
  cursor: pointer;
  text-align: center;
}






.rectFlexItem{
  padding: 1rem;
  flex-basis: calc((100% - 2rem) / 3);
}
.margin1pcLR {
  margin-left: 1rem;
  margin-right: 1rem;
}
.vertOK {
  background-color: var(--vert);
  text-align: center;
  font-weight: bolder;
  text-transform: uppercase;
  color: var(--blanc);
}
.rougePasOK {
  background-color: var(--rouge);
  text-align: center;
  font-weight: bolder;
  text-transform: uppercase;
  color: var(--blanc);
}
.rectFlex {
  width: 100%;
  padding: 0rem;
  margin: 0 0 1rem 0;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  row-gap: 0px;
  column-gap: 0px;
}

.rectFlex a {
  background-color: var(--blanc);
  padding: 1rem 0.5rem;
  color: var(--color-bg);
  text-decoration: none;
  text-transform: capitalize;
  font-size: 1rem;

  order: 0;
  flex-grow: 0;
  flex-shrink: 0;
  align-self: auto;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  row-gap: 0px;
  column-gap: 0px;

}
.rectFlex a:hover {
  background-color: var(--noirTransp);
  color: var(--accent);
}

.conteneurVignette {
  width: 100%;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: flex-start;
  row-gap: 1%;
  column-gap: 1%;
}
.pastille {
  position: absolute;
  top:0px;
  right:0px;
  width: 40px;
  height: 40px;
  color: #FFF;
  text-align: right;
  padding: 1px 7px 0 0;
  font-size: 0.8rem;
}
.pastille2 {
  position: absolute;
  top:0px;
  right:0px;
  width: 60px;
  height: 60px;
  color: #FFF;
  text-align: right;
  padding: 5px 12px 0 0;
  font-size: 1.1rem;
}
.pastille3 {
  position: absolute;
  top:0px;
  right:0px;
  width: 40px !important;
  height: 40px !important;
  color: #FFF;
  text-align: right !important;

}

.numProjet {
  position:absolute;
  bottom: 5px;
  left: 5px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--blanc);
  width: 25px;
  height: 25px;
  border-radius: 50%;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  row-gap: 0%;
  column-gap: 0%;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

}
.numProjet2 {
  position:absolute;
  top: 47%;
  left: 5px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--blanc);
  width: 25px;
  height: 25px;
  border-radius: 50%;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  row-gap: 0%;
  column-gap: 0%;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

}
.conteneurVignette a {
  order: 0;
  flex-grow: 0;
  flex-shrink: 0;
  align-self: auto;
  flex-basis: 32.33%;
  margin: 0 0 1% 0;
  padding: 0.5rem;
  overflow: hidden;

  position: relative;
}
.conteneurVignette a:hover {
  transform: scale(1.03);
}
.imgProjet{
  padding: 1rem;
  flex-basis: 100%;
  position: relative;
}
.leMur {
  z-index: 10;

    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 0px;
    grid-template-areas:
    "brick1  brick1  brick2  brick3  brick3  brick3  brick4  brick4  brick4  brick4"
    "brick1  brick1  brick5  brick3  brick3  brick3  brick4  brick4  brick4  brick4"
    "brick6  brick7  brick8  brick3  brick3  brick3  brick4  brick4  brick4  brick4"
    "brick9  brick9  brick9  brick9  brick9  brick10 brick4  brick4  brick4  brick4"
    "brick9  brick9  brick9  brick9  brick9  brick11 brick11 brick11 brick12 brick12"
    "brick9  brick9  brick9  brick9  brick9  brick11 brick11 brick11 brick12 brick12"
    "brick9  brick9  brick9  brick9  brick9  brick11 brick11 brick11 brick13 brick14"
    "brick9  brick9  brick9  brick9  brick9  brick15 brick15 brick16 brick16 brick16"
    "brick17 brick17 brick18 brick18 brick19 brick15 brick15 brick16 brick16 brick16"
    "brick17 brick17 brick18 brick18 brick20 brick21 brick22 brick16 brick16 brick16"      ;

  }

  .brick1 { grid-area: brick1; }
  .brick2 { grid-area: brick2; }
  .brick3 { grid-area: brick3; }
  .brick4 { grid-area: brick4; }
  .brick5 { grid-area: brick5; }
  .brick6 { grid-area: brick6; }
  .brick7 { grid-area: brick7; }
  .brick8 { grid-area: brick8; }
  .brick9 { grid-area: brick9; }
  .brick10 { grid-area: brick10; }
  .brick11 { grid-area: brick11; }
  .brick12 { grid-area: brick12; }
  .brick13 { grid-area: brick13; }
  .brick14 { grid-area: brick14; }
  .brick15 { grid-area: brick15; }
  .brick16 { grid-area: brick16; }
  .brick17 { grid-area: brick17; }
  .brick18 { grid-area: brick18; }
  .brick19 { grid-area: brick19; }
  .brick20 { grid-area: brick20; }
  .brick21 { grid-area: brick21; }
  .brick22 { grid-area: brick22; }

  .leMur a {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;

    width: 100%;
    height: 100%;

    cursor: pointer;
  }
  .leMur a:hover {
    transform: scale(1.03);
    opacity: 1;
    cursor: pointer;
  }


  .brick1, .brick2, .brick3, .brick4, .brick5, .brick6, .brick7, .brick8, .brick9, .brick10,
  .brick11, .brick12, .brick13, .brick14, .brick14bis, .brick15, .brick16, .brick17, .brick18,
  .brick19, .brick20, .brick21, .brick22  {
    overflow: hidden;
  }

.allStuffs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  row-gap: 0%;
  column-gap: 0%;
}
.allStuffs div {
  order: 0;
  flex-grow: 0;
  flex-shrink: 1;
  align-self: auto;
  margin-bottom: 0px;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  row-gap: 0%;
  column-gap: 0%;

}

@media (min-width: 700px) {
  header {
    width: 80%;
    height: 175px;
    margin: auto 10%;
  }
  .couleurChng {
    left: 10%;
  }
  main {
    width: 80%;
    margin: 175px 10% 0 10%;
  }
  .numProjet2 {
    top: 54%;
  }
}


/* Responsive adaptations */
@media (min-width: 1080px) {
  header {
    width: 50%;
    height: 200px;
    margin: auto 25%;
  }
  .couleurChng {
    left: 25%;
  }
  main {
    width: 50%;
    margin: 200px 25% 0 25%;
  }
  .marginBottomMenuLien {
    margin-bottom: 0px;
  }
  .numProjet2 {
    top: 54%;
  }
}