/* ------------------------ Global -------------------------*/

:root {
  --main-color: #9457dc;
  --secondary-one-color: #59aeeb;
  --secondary-two-color: #fb8434;
  --secondary-three-color: #323232;
  --secondary-fourth-color: #ffffff;
}

 
@font-face {
  font-family: "Recharge";
  src: url("../font/recharge.woff2") format("woff2"),
    url("../font/recharge.ttf") format("truetype");
}

@font-face {
  font-family: "Streak Medium";
  src: url("../font/streak-medium.woff2") format("woff2"),
    url("../font/streak-medium.ttf") format("truetype");
}

@font-face {
  font-family: "Streak Semibold";
  src: url("../font/streak-semibold.woff2") format("woff2"),
    url("../font/streak-semibold.ttf") format("truetype");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  padding: 0;
  margin: 0;
  font-size: 100%;
  scroll-behavior: smooth;
}

html::-webkit-scrollbar {
  width: 0.5rem;
}

html::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
}

html::-webkit-scrollbar-track {
  background-color: var(--secondary-fourth-color);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Streak Medium";
  color: var(--secondary-three-color);
}

a {
  text-decoration: none;
  color: var(--secondary-three-color);
  display: contents;
  cursor: pointer;
}

button[type="submit"] {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
}

input[type="submit"] {
  cursor: pointer;
}

p {
  cursor: default;
}

img {
  cursor: default;
}

textarea {
  font-family: "Streak Medium";
  width: 100%;
  font-size: 1rem;
  border: 0.125rem solid var(--main-color);
  padding: 0.625rem;
}

input[type="text"] {
  width: 100%;
  border: 0.125rem solid var(--main-color);
  padding: 0.625rem;
}

input[type="email"] {
  width: 100%;
  border: 0.125rem solid var(--main-color);
  padding: 0.625rem;
}

input[type="date"] {
  width: 100%;
  border: 0.125rem solid var(--main-color);
  padding: 0.625rem;
  font-size: 1rem;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

input[type="checkbox"] {
  border: 0.125rem solid var(--secondary-two-color);
  width: 0.938rem;
  height: 0.938rem;
}

input[type="checkbox"]:checked {
  background: var(--secondary-two-color);
}

input[type="radio"] {
  border: 0.125rem solid var(--secondary-two-color);
  width: 0.938rem;
  height: 0.938rem;
  border-radius: 100%;
}

input[type="radio"]:checked {
  background: var(--secondary-two-color);
}

i {
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(100%);
  border: 0;
}

/* ------------------------ Téléphone Bouton Switch -------------------------*/

.switch {
  display: inline-block;
  position: relative;
  width: 3.75rem;
  height: 1.875rem;
  cursor: pointer;
  overflow: hidden;
}

.switch input {
  position: absolute;
  top: -1.875rem;
  left: -1.875rem;
  width: 0;
  height: 0;
}

.switch input+span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--secondary-fourth-color);
  border: 0.188rem solid var(--secondary-two-color);
  border-radius: 1.25rem;
}

.switch input+span:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--secondary-two-color);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all 0.5s;
}

.switch input.checked+span:before {
  left: 1.875rem;
}

/* ------------------------ Téléphone Header/Menu Site/Administrateur -------------------------*/

.header-administrateur {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1.25rem 2.5rem;
  align-items: center;
}

.logo {
  width: 3.75rem;
  cursor: pointer;
}

.ordinateur {
  display: none;
}

.tel {
  display: initial;
}

.nav-menu.ouvert {
  background-color: transparent;
  color: var(--secondary-fourth-color);
}

.ouvrir {
  display: block;
  z-index: 6;
  color: var(--main-color);
  font-size: 2rem;
}

.ouvrir.ouvert {
  color: var(--secondary-fourth-color);
  background-color: transparent;
}

.fermer.ouvert {
  display: block;
  position: absolute;
  z-index: 6;
  top: 1.875rem;
  right: 2.188rem;
  font-size: 2rem;
  color: var(--secondary-fourth-color);
}

div .fermer {
  display: none;
}

.menu {
  display: flex;
  margin: 0;
  position: absolute;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--main-color);
  transform: translateX(-100%);
  transition: transform 1s;
  z-index: 5;
}

.menu.ouvert {
  display: flex;
  transform: translateX(0);
  padding: 0;
  z-index: 5;
}

.menu li {
  list-style-type: none;
}

.text-menu {
  text-decoration: none;
  font-family: "Recharge";
  font-size: 1.25rem;
  color: var(--secondary-fourth-color);
}

.menu2 {
  display: none;
}

.menu2 li {
  position: relative;
}

.activeMenu {
  position: relative;
}

.activeMenu::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.625rem;
  border: 0.188rem solid var(--main-color);
  width: 96%;
}

.form-maintenance {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
}

.main-maintenance {
  padding: 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-maintenance p {
  font-size: 1.125rem;
  margin: 0;
}

/* ------------------------ Téléphone Page Actualités Administrateur -------------------------*/

.div-btn-ajout {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 0.625rem;
  justify-content: flex-end;
}

.div-btn-ajout i {
  border: 0.125rem solid var(--secondary-two-color);
  padding: 0.313rem;
  border-radius: 1.875rem;
  color: var(--secondary-two-color);
}

.btn-ajout {
  font-family: "Recharge";
  color: var(--secondary-two-color);
  font-size: 0.875rem;
}

.actualite {
  display: flex;
  flex-direction: row;
  gap: 0.938rem;
  align-items: center;
  border: 0.125rem solid var(--main-color);
  padding: 0.938rem;
}

.actualite img {
  width: 4.375rem;
  height: 4.375rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  object-fit: cover;
  object-position: center;
}

.ens-actu {
  width: 100%;
  gap: 0.938rem;
  display: flex;
  flex-direction: column;
}

.titre-date {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.938rem;
}

.titre-actu {
  font-family: "Recharge";
  color: var(--main-color);
  font-size: 1.125rem;
  margin: 0;
}

.date-actu {
  font-size: 0.875rem;
  margin: 0;
}

.categorie-modifier {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.categorie-actu {
  color: var(--secondary-two-color);
  font-family: "Recharge";
  font-size: 0.875rem;
  margin: 0;
}

.icone-actu {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
  align-items: flex-start;
}

.icone-actu i {
  font-size: 1rem;
  color: var(--secondary-two-color);
}

/* ------------------------ Téléphone Page Ajout Administrateur -------------------------*/

.fleche-retour {
  font-size: 1.25rem;
}

.form-elements {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

.form-elements .input-video {
  margin-bottom: 0.625rem;
}

.form-elements .file-ajout {
  margin-bottom: 0;
}

.titre-form {
  font-family: "Recharge";
  font-size: 1.125rem;
  margin-top: 0;
  margin-bottom: 1.25rem;
  position: relative;
  width: fit-content;
}

.titre-form::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.625rem;
  border: 0.188rem solid var(--main-color);
  width: 50%;
}

.div-form {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
  align-items: flex-start;
}

.div-categorie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  border: 0.125rem solid var(--main-color);
  padding: 0.625rem;
  width: 100%;
}

.div-check {
  display: flex;
  flex-direction: row;
  align-items: self-end;
  gap: 0.938rem;
}

.titre-edit-2 {
  font-family: "Recharge";
  font-size: 1rem;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}

.btn-enre {
  font-size: 1rem;
  color: var(--secondary-two-color);
  border: 0.125rem solid var(--secondary-two-color);
  background: transparent;
  font-family: "Recharge";
  padding: 0.625rem;
  transition: all 0.3s;
}

.btn-enre:hover {
  background-color: var(--secondary-two-color);
  color: var(--secondary-fourth-color);
  transition: all 0.3s;
}

.marge {
  margin-top: 0.625rem;
}

input[type="file"] {
  margin-bottom: 1.25rem;
  border: 0.125rem solid var(--main-color);
  padding: 0.625rem;
  cursor: pointer;
}

input::file-selector-button {
  border: 0.125rem solid var(--secondary-two-color);
  padding: 0.625rem;
  color: var(--secondary-two-color);
  background-color: transparent;
  font-family: "Recharge";
  cursor: pointer;
  transition: all 0.3s;
}

input::file-selector-button:hover {
  background-color: var(--secondary-two-color);
  color: var(--secondary-fourth-color);
  transition: all 0.3s;
}

input[type="checkbox"] {
  cursor: pointer;
}

input[type="radio"] {
  cursor: pointer;
}

/* ------------------------ Téléphone Page Modifier Administrateur -------------------------*/

.fa-pen {
  color: var(--main-color);
}

.img-edition {
  width: 9.375rem;
  height: 9.375rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  margin-bottom: 0.938rem;
  object-fit: cover;
  object-position: center;
}

.icone-image i {
  font-size: 1.25rem;
  color: var(--secondary-two-color);
  margin-top: 0.625rem;
}

.trash-trash {
  font-size: 1.25rem;
  margin-bottom: 0.625rem;
}

.div-radio {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.938rem;
}

.video-edit-actu {
  margin-bottom: 1.25rem;
}

.text-alt {
  margin-top: 0.625rem;
}

button[type="submit"] .fa-trash-can {
  color: var(--secondary-two-color);
}

/* ------------------------ Téléphone Page Index -------------------------*/

.accueil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.div-accueil {
  display: flex;
  gap: 1.25rem;
  flex-direction: column;
}

.div-img-fixe {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-fixe {
  width: 70%;
  margin-top: 1.25rem;
}

.slider {
  max-width: 60rem;
  margin: auto;
  overflow: hidden;
  display: grid;
  z-index: 1;
  margin: 0 1.25rem 0 1.25rem;
  position: relative;
}

.slider-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  transition: transform 500ms;
  display: flex;
  grid-area: 1/1;
  z-index: 2;
}

.slider-list-item {
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.slider-list-item img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 80vh;
  object-fit: cover;
  object-position: center;
}

.slider-btn {
  background: transparent;
  border: none;
  outline: none;
  grid-area: 1/1;
  cursor: pointer;
  width: 15%;
  z-index: 3;
}

.slider-prev {
  place-self: center start;
  font-size: 1.25rem;
}

.slider-next {
  place-self: center end;
  font-size: 1.25rem;
}

.slider-dots {
  margin-top: 0.938rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1.25rem;
  position: absolute;
  bottom: 0;
  z-index: 10;
  justify-self: center;
}

.slider-dot {
  width: 0.8rem;
  height: 0.8rem;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--secondary-one-color);
  margin-bottom: 0.938rem;
}

.slider-dot svg {
  transition: fill 0.3s ease;
}

.slider-dot.current svg {
  fill: #ffffff;
}

.slider-dot.current {
  background-color: var(--secondary-two-color);
}

/*       debut section vidéo           */

.evago-section {
  background-color: var(--secondary-one-color);
  padding: 2rem 1rem;
  margin-top: 2rem;
}

.evago-section h1 {
  position: relative;
  text-align: center;
  color: var(--secondary-three-color);
  margin: 0 auto 2rem auto;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  max-width: 90%;
}

.evago-section h1::after {
  content: "";
  display: block;
  margin: 0.8rem auto 0 auto;
  width: 14rem;
  height: 0.25rem;
  background-color: var(--secondary-two-color);
  border-radius: 0.125rem;
}

.p-bandeau {
  background-color: var(--secondary-one-color);
  color: var(--secondary-fourth-color);
  padding: 0.938rem;
  margin: 0 auto 2rem;
  line-height: 1.6;
  border-radius: 0.5rem;
  font-size: 1.15rem;
  max-width: 1220px;
}

.titre-section-blanc-v1 {
  text-align: center;
  font-size: 1.8rem;
  color: var(--secondary-fourth-color);
  margin-bottom: 2rem;
}

/* Galerie comme demandée */
.gallery-video {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  padding: 0 1rem 1rem;
  max-width: 1220px;
  margin: 0 auto;
}

.gallery-video-item {
  background: var(--secondary-fourth-color);
  border: 2px solid var(--secondary-one-color);
  border-radius: var(--border-radius, 8px);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.gallery-video-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.gallery-video-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.gallery-video-title {
  padding: 0.8rem;
  background: var(--main-color);
  color: white;
  font-size: 1.1rem;
  text-align: center;
}

/* Responsive fix pour petits écrans */
@media (max-width: 1100px) {
  .gallery-video {
    grid-template-columns: repeat(2, 1fr);
    max-width: 669px;
  }
}

@media (max-width: 640px) {
  .gallery-video {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}

@media (max-width: 480px) {
  .gallery-video {
    grid-template-columns: 1fr;
    max-width: 100%;
    padding: 0 0.5rem 1rem;
  }

  .gallery-video-title {
    font-size: 1rem;
    padding: 0.5rem;
  }
}
@media (max-width: 1024px) {
  .evago-section h1 {
    font-size: 2rem;
    padding: 0 1rem;
  }

  .p-bandeau {
    font-size: 1rem;
    padding: 0.75rem;
    max-width: 90%;
  }

  .titre-section-blanc-v1 {
    font-size: 1.5rem;
    padding: 0 1rem;
  }
}

@media (max-width: 640px) {
  .evago-section h1 {
    font-size: 1.6rem;
  }

  .p-bandeau {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .titre-section-blanc-v1 {
    font-size: 1.3rem;
  }
}





.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  z-index: 1000;
}

.modal-backdrop.active {
  display: flex;
}

.modal {
  background: var(--secondary-fourth-color);
  border: 3px solid var(--main-color);
  border-radius: var(--border-radius, 8px);
  width: 95%;
  max-width: 1000px;
  max-height: 95vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: var(--secondary-three-color);
  cursor: pointer;
}

.close-btn:hover {
  color: var(--secondary-two-color);
}

.modal-video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.modal-description {
  padding: 1rem;
  color: var(--secondary-three-color);
  font-size: 1rem;
  line-height: 1.5;
}




  /*fin section video */

.objectifs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.875rem;
  margin: 1.25rem 0;
  margin-top: 2.5rem;
}

.obj {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.313rem;
}

.i-obj {
  color: var(--secondary-one-color);
  font-size: 3.75rem;
}

.obj-chiffre {
  margin: 0;
  font-family: "Recharge";
  color: var(--secondary-two-color);
  font-size: 1.25rem;
}

.obj-p {
  margin: 0;
  font-family: "Recharge";
  font-size: 1.25rem;
}

.section-actualite {
  margin: 3.125rem 1.875rem 3.125rem 2.5rem;
}

.div-titre-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  cursor: default;
}

.titre-section {
  font-family: "Recharge";
  margin: 0;
  position: relative;
  width: fit-content;
  cursor: default;
}

.titre-section::after {
  content: "";
  position: absolute;
  border: 0.188rem solid var(--main-color);
  width: 50%;
  left: 0;
  bottom: -0.625rem;
}

.i-titre-section {
  color: var(--secondary-two-color);
  font-size: 1.25rem;
}

.toutes-actualites {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  align-items: center;
}

.actu-seule {
  width: min-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.div-titre-actu-img {
  position: relative;
  display: flex;
}

.div-titre-actu-img::before {
  content: "";
  position: absolute;
  left: -0.938rem;
  border: var(--main-color) 0.188rem solid;
  top: 0;
  height: 98%;
}

.img-sec-actu {
  width: 18.75rem;
  height: 18.75rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  object-fit: cover;
  object-position: center;
  filter: opacity(0.3);
}

.titre-actu-seule {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-family: "Recharge";
  font-size: 0.875rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.date-video {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.date-video i {
  font-size: 1.125rem;
  color: var(--secondary-two-color);
}

.date-actu-seule {
  margin: 0;
}

.toutes-cat-actu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 0.125rem dashed var(--secondary-two-color);
}

.cat-actu-seule {
  margin: 0;
  color: var(--secondary-two-color);
  padding: 0.625rem;

  font-family: "Recharge";
  width: fit-content;
  font-weight: lighter;
  font-size: 0.813rem;
}

.lien-lire-actu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  width: fit-content;
  padding: 10px;
  border: 0.125rem solid var(--main-color);
  border-radius: 10%;
}

.lien-lire-actu:hover,
.lien-lire-actu:hover p {
  background-color: var(--main-color);
  color: var(--secondary-fourth-color);
}

.p-lire-actu {
  margin: 0;
  font-family: "Recharge";
  font-weight: lighter;
  font-size: 0.875rem;
  color: var(--main-color);
  width: 100%;
}

.fleche-lire-actu {
  color: var(--secondary-two-color);
  font-size: 1rem;
}

.section-publication {
  padding: 3.125rem 1.875rem 3.125rem 2.5rem;
  background-color: var(--secondary-one-color);
}

.titre-section-blanc {
  font-family: "Recharge";
  margin: 0;
  position: relative;
  color: var(--secondary-fourth-color);
}

.titre-section-blanc::after {
  content: "";
  position: absolute;
  border: 0.188rem solid var(--secondary-fourth-color);
  width: 50%;
  left: 0;
  bottom: -0.625rem;
}

.i-titre-section-blanc {
  color: var(--secondary-fourth-color);
  font-size: 1.25rem;
}

.toutes-publications {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  align-items: stretch;
}

.publication-seule {
  display: flex;
  flex-direction: row;
  background-color: var(--secondary-fourth-color);
  padding: 0.938rem;
  gap: 0.938rem;
  align-items: center;
}

.img-publi-seule {
  width: 3.75rem;
  height: 3.75rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  object-fit: cover;
  object-position: center;
}

.reste-publi {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.625rem;
  width: 100%;
}

.titre-reference {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.625rem;
  width: 100%;
}

.titre-publication {
  font-family: "Recharge";
  color: var(--main-color);
  font-size: 0.875rem;
  margin: 0;
}

.reference-publication {
  font-size: 0.875rem;
  margin: 0;
}

.tous-auteurs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.div-auteur-seul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

.div-auteur-seul p {
  font-size: 0.875rem;
  font-family: "Streak Semibold";
  margin: 0;
}

.img-profil-auteur {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: cover;
  object-position: center;
  clip-path: circle(50% at 50% 50%);
}

.div-partenaires-publication {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 0.125rem dashed var(--secondary-two-color);
  width: fit-content;
}

.partenaire-publication {
  padding: 0.5rem;
  margin: 0;
  font-family: "Recharge";
  color: var(--secondary-two-color);
  font-size: 0.813rem;
}

.tous-evenements {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 2.5rem;
  gap: 2.5rem;
}

.evenement-seul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  border: 0.188rem solid var(--main-color);
  padding: 1.25rem;
  position: relative;
}

.evenement-seul::before {
  content: "";
  position: absolute;
  border: 0.188rem solid var(--secondary-two-color);
  border-radius: 100%;
  width: 0.625rem;
  height: 0.625rem;
  top: -0.563rem;
  background-color: var(--secondary-two-color);
}

.titre-evenement {
  font-family: "Recharge";
  color: var(--main-color);
  font-size: 1rem;
  margin: 0;
}

.tous-participants {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.625rem;
  width: 100%;
}

.p-participant {
  margin: 0;
  font-size: 1rem;
}

.titre-second-evenement {
  font-family: "Recharge";
  color: var(--main-color);
  font-size: 0.875rem;
  margin: 0;
  width: 100%;
}

.p-resume {
  width: 100%;
}

.div-maintenance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin: 1.875rem;
  height: 100%;
  justify-content: center;
}

.div-maintenance p {
  font-size: 1.125rem;
  color: var(--main-color);
  margin: 0;
  text-align: center;
  font-family: "Recharge";
}

/* ------------------------ Téléphone Page Footer  -------------------------*/

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: var(--secondary-one-color);
  padding: 1.25rem;
  gap: 0.938rem;
}

.footer-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.938rem;
}

.div-anr {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

.logo-anr {
  width: 8.125rem;
}

.p-anr {
  color: var(--secondary-fourth-color);
  margin-bottom: 0;
}

.div-univ {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.938rem;
}

.img-univ {
  width: 9.375rem;
}

.footer-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.938rem;
}

.div-logo-part {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
}

.logo-part {
  width: 9.375rem;
}

.contact-lien {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-items: center;
  gap: 0.625rem;
}

.btn-contact {
  font-size: 1rem;
  color: var(--secondary-fourth-color);
  border: 0.125rem solid var(--secondary-fourth-color);
  background: transparent;
  font-family: "Recharge";
  padding: 0.938rem;
  transition: all 0.3s;
  cursor: pointer;
}

.btn-contact:hover {
  background-color: var(--secondary-fourth-color);
  color: var(--secondary-one-color);
  transition: all 0.3s;
}

.div-p-ment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.p-ment {
  font-family: "Recharge";
  font-size: 0.875rem;
  margin: 0;
  color: var(--secondary-fourth-color);
  cursor: pointer;
}

.p-footer {
  color: var(--secondary-fourth-color);
  font-size: 1rem;
  margin: 0;
}

.credit-footer {
  color: var(--secondary-fourth-color);
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
  align-self: flex-end;
}

/* ------------------------ Téléphone Page Projet -------------------------*/

.body-index {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-site {
  margin: 1.25rem 1.25rem;
}

.p-bleu {
  padding: 1.25rem;
  background-color: var(--secondary-one-color);
  color: var(--secondary-fourth-color);
  font-size: 1rem;
  margin: 0;
  margin-top: 1.5rem;
}
 
.div-img-projet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.938rem;
  margin-bottom: 1.875rem;
  margin-top: 1.875rem;
}

.img-projet {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  width: 15.625rem;
  height: 15.625rem;
  object-position: center;
  object-fit: cover;
}

.div-carre-projet {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
  margin-bottom: 1.875rem;
}

.big-div-carre {
  gap: 1.25rem;
}

.carre-projet {
  gap: 0.625rem;
  border: 0.188rem solid var(--main-color);
  padding: 0.625rem 0.938rem;
  border-radius: 20%;
  width: 100%;
  align-content: center;
}

/*  carre page orga*/
.div-carre-projet-orga {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
  margin-bottom: 1.875rem;
}


.big-div-carre-orga {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
}


.carre-projet-orga {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  width: fit-content;
  justify-content: center;
}

.carre-projet-orga i {
  color: var(--secondary-two-color);
  font-size: 1.25rem;
}

.construction.active i {
  transform: rotate(180deg);
}

.p-carre-projet {
  color: var(--main-color);
  font-size: 0.875rem;
  font-family: "Recharge";
  margin: 0;
  text-align: center;
}

.cache-carre {
  background-color: var(--secondary-one-color);
  padding: 1.25rem;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
}

.cache-carre img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  width: 6.25rem;
  height: 6.25rem;
  object-position: center;
  object-fit: cover;
}

.cache-construction {
  display: none;
}

.cache-construction.ouvert {
  display: flex;
}

.p-cache {
  color: var(--secondary-fourth-color);
  margin: 0;
}

.definition.active i {
  transform: rotate(180deg);
}

.cache-definition {
  display: none;
}

.cache-definition.ouvert {
  display: flex;
}

.integration.active i {
  transform: rotate(180deg);
}

.cache-integration {
  display: none;
}

.cache-integration.ouvert {
  display: flex;
}

.transformation.active i {
  transform: rotate(180deg);
}

.cache-transformation {
  display: none;
}

.cache-transformation.ouvert {
  display: flex;
}

.evolution.active i {
  transform: rotate(180deg);
}

.cache-evolution {
  display: none;
}

.cache-evolution.ouvert {
  display: flex;
}

.big-div-carre-2-orga {
  display: none;
}


/* ------------------------ Téléphone Page Organisation -------------------------*/

.big-div-carre .wp-organisation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.938rem;
  border: 0;
  padding: 0;
}

.img-organisation {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  max-width: 12.5rem;
  max-height: 12.5rem;
  object-position: center;
  object-fit: cover;
  border: 0.188rem solid var(--secondary-one-color);
}

.div-wp-orga {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
}

.div-wp-orga .p-carre-projet {
  font-size: 1rem;
}

/* ------------------------ Téléphone Page Actualités -------------------------*/

.tous-btn-filtre {
  margin-bottom: 1.875rem;
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.938rem;
}

.btn-filtre-0 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.p-btn-filtre {
  margin: 0;
  font-family: "Recharge";
  font-size: 1.125rem;
}

.btn-filtre {
  font-size: 0.875rem;
  color: var(--main-color);
  padding: 0.625rem;
  border: 0.125rem solid var(--main-color);
  background-color: var(--secondary-fourth-color);
  cursor: pointer;
  transition: all 0.3s;
}

.btn-filtre:hover {
  background-color: var(--main-color);
  color: var(--secondary-fourth-color);
  transition: all 0.3s;
}

.btn-filtre.current {
  color: var(--secondary-fourth-color);
  background-color: var(--main-color);
}

.sous-div-filtre-1 {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  gap: 0.938rem;
}

.index-actualites {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.toutes-index-actu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  width: fit-content;
  justify-content: center;
  width: 100%;
  gap: 1.875rem;

}

.toutes-index-actu.filtre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
}

.index-actu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
  padding: 15px;
  background-color: #f1f6ff;
  ;
}

.index-actu img {
  width: 100%;
}

.img-index-actu {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  width: 9.375rem;
  height: 9.375rem;
  object-position: center;
  object-fit: cover;
}

.date-index-actu {
  margin: 0;
  font-size: 0.875rem;
}

.toutes-cat-index-actu {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 0.125rem dashed var(--secondary-two-color);
  width: fit-content;
}

.cat-index-actu {
  padding: 0.5rem;
  margin: 0;
  font-family: "Recharge";
  color: var(--secondary-two-color);
  font-size: 0.813rem;
}

.titre-index-actu {
  margin: 0;
  font-weight: bold;
  font-size: 1rem;
}

.a-video-index-actu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.lien-lire-index-actu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

.p-lire-index-actu {
  margin: 0;
  color: var(--main-color);
  font-family: "Recharge";
  font-size: 0.75rem;
}

.fleche-lire-index-actu {
  color: var(--secondary-two-color);
  font-size: 0.938rem;
}

.video-index-actu {
  color: var(--main-color);
  font-size: 0.938rem;
}

.btn-filtre3 {
  font-size: 0.875rem;
  color: var(--main-color);
  padding: 0.625rem;
  border: 0.125rem solid var(--main-color);
  background-color: var(--secondary-fourth-color);
  cursor: pointer;
  transition: all 0.3s;
}

.btn-filtre3:hover {
  background-color: var(--main-color);
  color: var(--secondary-fourth-color);
  transition: all 0.3s;
}

.btn-filtre3.current {
  color: var(--secondary-fourth-color);
  background-color: var(--main-color);
}

/* ------------------------ Téléphone Page Détails Actualités -------------------------*/

.section-details-actu {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.section-details-actu .fleche-retour i {
  color: var(--secondary-two-color);
}

.titre-details-actu {
  font-family: "Recharge";
  font-size: 1rem;
  margin: 0;
}

.div-img-details-actu {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
}

.img-details-actu {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  width: 12.5rem;
  height: 12.5rem;
  object-position: center;
  object-fit: cover;
}

.div-img-details-actu2 {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
}

.p-details-actu {
  margin: 0;
  font-size: 1rem;
}

.video-details-actu {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  width: 100%;
  height: auto;
  object-position: center;
  object-fit: cover;
}

.date-details-actu {
  margin: 0;
  font-size: 1rem;
  text-align: end;
}

/* ------------------------ Téléphone Page Publications -------------------------*/

.section-index-publications {
  gap: 1.875rem;
  display: flex;
  flex-direction: column;
}

.section-index-publications .tous-btn-filtre {
  margin: 0;
}

.btn-filtre2 {
  font-size: 0.875rem;
  color: var(--main-color);
  padding: 0.625rem;
  border: 0.125rem solid var(--main-color);
  background-color: var(--secondary-fourth-color);
  cursor: pointer;
  transition: all 0.3s;
}

.btn-filtre2:hover {
  background-color: var(--main-color);
  color: var(--secondary-fourth-color);
  transition: all 0.3s;
}

.btn-filtre2.current {
  color: var(--secondary-fourth-color);
  background-color: var(--main-color);
}

.toutes-index-publi {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.index-publi {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.938rem;
  padding: 0.938rem;
  border: 0.188rem solid var(--main-color);
}

.img-index-publi {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  width: 4.375rem;
  height: 4.375rem;
  object-position: center;
  object-fit: cover;
  cursor: pointer;
  overflow: hidden;
}

.reste-index-publi {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
}

.div-titre-ref-index-publi {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.titre-index-publi {
  font-size: 0.875rem;
  font-family: "Recharge";
  color: var(--main-color);
  margin: 0;
}

.ref-index-publi {
  margin: 0;
  font-size: 1rem;
}

/* ------------------------ Téléphone Page Partenaires -------------------------*/

.section-index-publications>div:last-child .div-barre-partenaire {
  display: none;
}

.div-partenaire {
  display: flex;
  flex-direction: column;
  gap: 0.938rem;
}

.div-img-texte-partenaire {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.div-img-texte-partenaire img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  width: 12.5rem;
  height: 12.5rem;
  object-position: center;
  object-fit: cover;
}

.div-img-texte-partenaire p {
  font-size: 1rem;
  margin: 0;
}

.p-membre-partenaire {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.938rem;
}

.membre-partenaire {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.seul-membre-partenaire {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}

.seul-membre-partenaire img {
  width: 1.875rem;
  height: 1.875rem;
  object-fit: cover;
  object-position: center;
  clip-path: circle(50% at 50% 50%);
}

.seul-membre-partenaire p {
  margin: 0;
  font-size: 0.875rem;
  font-family: "Recharge";
  color: var(--main-color);
}

.seul-membre-partenaire a i {
  color: var(--secondary-two-color);
}

.div-barre-partenaire {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.barre-partenaire {
  width: 80%;
  border: 0.188rem solid var(--main-color);
  margin-top: 0.625rem;
}

/* ------------------------ Téléphone Page Évènements -------------------------*/

.tous-index-evenements {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}

/* ------------------------ Téléphone Page Contact -------------------------*/

.section-contact {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.div-p-contact .fit {
  width: fit-content;
  margin: 0;
}

.p-contact {
  background-color: var(--secondary-one-color);
  color: var(--secondary-fourth-color);
  padding: 0.938rem;
  margin: 0.938rem 0 0 0;
  font-size: 1rem;
}

.form-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.938rem;
}

.nom-prenom-contact {
  display: flex;
  flex-direction: column;
  gap: 0.938rem;
  align-items: flex-start;
  width: 100%;
}

.div-elemts-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
}

.div-elemts-contact label {
  font-family: "Recharge";
  font-size: 1rem;
}

.div-elemts-contact input {
  font-family: "Streak Medium";
  font-size: 1rem;
}

.bouton-contact {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 0.625rem;
}

.bouton-contact .btn-contact {
  border: 0.125rem solid var(--secondary-two-color);
  padding: 0.938rem;
  font-family: "Recharge";
  color: var(--secondary-two-color);
  transition: all 0.3s;
}

.bouton-contact .btn-contact:hover {
  background-color: var(--secondary-two-color);
  color: var(--secondary-fourth-color);
  transition: all 0.3s;
}

/* ------------------------ Téléphone Page Mentions Légales -------------------------*/

.div-mentions {
  margin-top: 2rem;
}

.div-mentions h3 {
  font-size: 1.5rem;
}

@media all and (max-width: 396px) {
  /* ------------------------ Fold Page Index -------------------------*/

  .img-sec-actu {
    width: 12.5rem;
    height: 12.5rem;
  }

  /* ------------------------ Fold Page Footer -------------------------*/

  .img-univ {
    width: 7.5rem;
  }

  /* ------------------------ Fold Page Actualités -------------------------*/

  .toutes-index-actu {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .toutes-index-actu.filtre {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: dense;
  }
}

@media all and (min-width: 500px) {

  /* ------------------------ 500px page organisation verrous -------------------------*/
  .div-carre-projet {
    grid-template-columns: 1fr 1fr;
  }

  .carre-projet:last-child {
    grid-column: span 2;
    width: 70%;
  }

}

@media all and (min-width: 768px) {
  /* ------------------------ Tablette Bouton Switch -------------------------*/

  .switch input+span:before {
    width: 1.75rem;
    height: 1.75rem;
  }

  .switch {
    width: 4.375rem;
    height: 2.5rem;
  }

  /* ------------------------ Tablette Header/Menu Site/Administrateur -------------------------*/

  .body-index .enleve {
    padding: 1.25rem 1.875rem;
  }

  .header-administrateur .logo2 {
    width: 3.125rem;
  }

  .logo {
    width: 4.375rem;
  }

  .ordinateur {
    display: none;
  }

  .nav-menu .riquiqui {
    gap: 1.25rem;
    padding-left: 1.25rem;
  }

  div .tel {
    display: none;
  }

  .menu {
    display: none;
  }

  .menu2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--secondary-fourth-color);
    gap: 2.5rem;
  }

  .menu2 li {
    list-style-type: none;
  }

  .text-menu2 {
    text-decoration: none;
    font-family: "Recharge";
    font-size: 0.875rem;
  }

  .menu2 .petit {
    font-size: 0.813rem;
  }

  .main-maintenance {
    padding: 1.25rem 3.75rem;
    gap: 1.875rem;
  }

  /* ------------------------ Tablette Page Actualités Administrateur -------------------------*/

  .btn-ajout {
    font-size: 1rem;
  }

  .actualite {
    gap: 1.875rem;
    padding: 1.25rem;
  }

  .actualite img {
    width: 7.5rem;
    height: 7.5rem;
  }

  .ens-actu {
    gap: 2.5rem;
  }

  .titre-actu {
    font-size: 1.25rem;
    width: 75%;
  }

  .date-actu {
    font-size: 1rem;
  }

  .categorie-actu {
    font-size: 1.125rem;
  }

  .icone-actu i {
    font-size: 1.125rem;
  }

  /* ------------------------ Tablette Page Ajout Administrateur -------------------------*/

  .titre-form {
    font-size: 1.375rem;
    margin-bottom: 1.875rem;
  }

  .marge {
    margin-top: 0.938rem;
  }

  .fleche-retour {
    font-size: 1.375rem;
  }

  .div-check label {
    font-size: 1.125rem;
  }

  /* ------------------------ Tablette Page Modifier Administrateur -------------------------*/

  .img-edition {
    width: 15.625rem;
    height: 15.625rem;
    margin-bottom: 1.25rem;
  }

  textarea {
    font-size: 1.125rem;
  }

  input[type="date"] {
    font-size: 1.125rem;
  }

  .div-radio label {
    font-size: 1.125rem;
  }

  /* ------------------------ Tablette Page index -------------------------*/

  .div-accueil {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    margin: 0 1.875rem;
    margin-top: 1.875rem;
    width: calc(100% - 3.75rem);
    gap: 3.125rem;
  }

  .div-img-fixe {
    width: 30%;
  }

  .img-fixe {
    margin: 0;
    width: 100%;
  }

  .slider {
    max-width: 24.8rem;
    margin: 0;
  }

  .p-bandeau {
    font-size: 1.125rem;
  }

  .objectifs {
    flex-direction: row;
    margin: 3.125rem 0 2.5rem 0;
    justify-content: space-evenly;
  }

  .section-actualite {
    margin: 3.125rem 3.75rem 3.125rem 3.75rem;
  }

  .toutes-actualites {
    margin-top: 3.125rem;
    display: grid;
    grid-template-columns: auto auto;
    gap: 1.875rem;
    align-items: start;
  }

  .section-publication {
    padding: 3.125rem 3.75rem 3.125rem 3.75rem;
  }

  .toutes-publications {
    margin-top: 3.125rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.875rem;
    align-items: stretch;
  }

  .publication-seule {
    padding: 1.25rem;
  }

  .img-publi-seule {
    width: 5rem;
    height: 5rem;
  }

  .tous-evenements {
    gap: 3.125rem;
    margin: 3.125rem 3.125rem 0 3.125rem;
  }

  .evenement-seul {
    gap: 0.938rem;
    padding: 1.875rem;
  }

  .evenement-seul::before {
    width: 0.938rem;
    height: 0.938rem;
    top: -0.75rem;
  }

  .p-participant {
    font-size: 1.125rem;
  }

  .div-maintenance p {
    font-size: 1.625rem;
  }

  /* ------------------------ Tablette Page Footer -------------------------*/

  footer {
    padding: 1.875rem;
    gap: 1.25rem;
  }

  .footer-1 {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
  }

  .logo-anr {
    width: 8.75rem;
  }

  .p-anr {
    font-size: 1.125rem;
  }

  .div-univ {
    gap: 1.25rem;
  }

  .img-univ {
    width: 9.375rem;
  }

  .footer-2 {
    width: 100%;
  }

  .div-logo-part {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
  }

  .logo-part {
    width: 6.25rem;
  }

  .contact-lien {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
  }

  .btn-contact {
    font-size: 1.125rem;
  }

  .p-ment {
    font-size: 1.125rem;
  }

  .p-footer {
    margin-top: 0.625rem;
    font-size: 1.125rem;
  }

  .credit-footer {
    font-size: 1rem;
  }

  /* ------------------------ Tablette Page Projet -------------------------*/

  .main-site {
    margin: 1.25rem 3.75rem 3.125rem 3.75rem;
  }

  .p-bleu {
    font-size: 1.125rem;
    padding: 1.875rem;
  }

  .div-img-projet {
    flex-direction: row;
    justify-content: space-between;
  }

  .img-projet {
    width: 9.375rem;
    height: 9.375rem;
  }

  .carre-projet {
    padding: 0.313rem 0.625rem;
  }

  .carre-pro {
    width: 100%;
  }

  .carre-projet i {
    font-size: 0.938rem;
  }

  .p-carre-projet {
    font-size: 0.75rem;
  }

  .div-carre-projet {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    margin-top: 3.125rem;
    margin-bottom: 1.25rem;
    gap: 1.25rem;
  }

  .carre-projet:last-child {
    width: 100%;
    grid-column: span 1;
    grid-area: 2/3/3/4;
    justify-self: flex-end;
    margin-right: 50%;
  }

  .carre-projet:nth-last-child(2) {
    justify-self: flex-start;
    margin-left: 50%;
  }

  /*    carre page orga     */

  .div-carre-projet-orga {
    display: none;
  }

  .big-div-carre-2-orga {
    display: flex;
    flex-direction: column;
    margin-top: 3.125rem;
    margin-bottom: 1.25rem;
    gap: 1.25rem;
  }


  .div-carre-projet2-orga {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.75rem;
  }


  .big-div-carre-2-orga .marge-b {
    margin-bottom: 0.625rem;
    flex-direction: column;
  }

  /* ------------------------ Tablette Page Organisation -------------------------*/

  .wp-organisation {
    border: 0;
    padding: 0;
    align-items: flex-start;
  }

  .img-organisation {
    max-width: 7.5rem;
    max-height: 7.5rem;
  }

  /* ------------------------ Tablette Page Actualités -------------------------*/

  .tous-btn-filtre {
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
    flex-direction: row;
    gap: 2.5rem;
  }

  .toutes-index-actu {
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 2.5rem;
  }

  .toutes-index-actu.filtre {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
  }

  .img-index-actu {
    width: 12.5rem;
    height: 12.5rem;
  }

  .titre-index-actu {
    font-size: 1.125rem;
  }

  .p-lire-index-actu {
    font-size: 0.875rem;
  }

  /* ------------------------ Tablette Page Détails Actualités -------------------------*/

  .section-details-actu {
    gap: 1.563rem;
  }

  .titre-details-actu {
    font-size: 1.25rem;
  }

  .div-img-details-actu {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .div-img-details-actu2 {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.875rem;
  }

  .p-details-actu {
    font-size: 1.125rem;
  }

  /* ------------------------ Tablette Page Publications -------------------------*/

  .section-index-publications {
    gap: 2.5rem;
  }

  .btn-filtre-publi {
    flex-direction: row;
    gap: 0.938rem;
    width: 100%;
    flex-wrap: wrap;
  }

  .index-publi {
    padding: 1.25rem;
  }

  .img-index-publi {
    width: 6.25rem;
    height: 6.25rem;
  }

  .titre-index-publi {
    font-size: 1rem;
  }

  .reste-index-publi .auteurs-index-publi .div-auteur-seul img {
    width: 1.875rem;
    height: 1.875rem;
  }

  .reste-index-publi .auteurs-index-publi .div-auteur-seul p {
    font-size: 1rem;
  }

  .reste-index-publi a .lien-lire-actu p {
    font-size: 1rem;
  }

  .reste-index-publi a .lien-lire-actu i {
    font-size: 1.125rem;
  }

  /* ------------------------ Tablette Page Partenaires -------------------------*/

  .div-img-texte-partenaire {
    display: flex;
    flex-direction: row;
    gap: 1.875rem;
    align-items: flex-start;
  }

  .p-membre-partenaire {
    gap: 1.25rem;
  }

  .membre-partenaire {
    gap: 0.938rem;
  }

  .seul-membre-partenaire p {
    font-size: 1rem;
  }

  .barre-partenaire {
    margin-top: 1.25rem;
  }

  /* ------------------------ Tablette Page Évènements -------------------------*/

  .tous-index-evenements {
    gap: 1.875rem;
  }

  /* ------------------------ Tablette Page Contact -------------------------*/

  .section-contact {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
  }

  .div-p-contact {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .p-contact {
    width: 80%;
    padding: 1.25rem;
    font-size: 1.125rem;
  }

  .form-contact {
    gap: 1.25rem;
  }

  .nom-prenom-contact {
    flex-direction: row;
    gap: 1.25rem;
  }

  .div-elemts-contact input {
    font-size: 1.125rem;
  }

  .div-elemts-contact label {
    font-size: 1.125rem;
  }

  /* ------------------------ Tablette Page Mentions Légales -------------------------*/

  .p-mentions {
    font-size: 1.125rem;
  }

  .div-mentions h3 {
    font-size: 1.6rem;
  }
}

@media all and (min-width: 1024px) {
  /* ------------------------ Ordinateur Header/Menu Site/Administrateur -------------------------*/

  .body-index .enleve {
    padding: 1.875rem 5rem;
  }

  .header-administrateur {
    padding: 1.875rem 5rem;
  }

  .header-administrateur .logo2 {
    width: 15.625rem;
  }

  .logo {
    width: 5rem;
  }

  .ordinateur {
    display: initial;
  }

  .tel {
    display: none;
  }

  .nav-menu .riquiqui {
    gap: 2.5rem;
  }

  .menu2 {
    gap: 3.125rem;
  }

  .menu2 .petit {
    font-size: 1.125rem;
  }

  .text-menu2 {
    font-size: 1.125rem;
  }

  .main-maintenance {
    padding: 1.875rem 9.375rem;
  }

  /* ------------------------ Ordinateur Page Actualités Adminstrateur -------------------------*/

  .actualite {
    gap: 1.875rem;
    padding: 1.25rem;
  }

  .actualite img {
    width: 10rem;
    height: 10rem;
  }

  .ens-actu {
    gap: 2.5rem;
  }

  .titre-actu {
    font-size: 1.375rem;
    width: 90%;
  }

  .date-actu {
    font-size: 1.125rem;
  }

  .categorie-actu {
    font-size: 1.25rem;
  }

  .icone-actu i {
    font-size: 1.25rem;
  }

  /* ------------------------ Ordinateur Page Ajout Amdinistrateur -------------------------*/

  .fleche-retour {
    font-size: 1.563rem;
  }

  .titre-form {
    font-size: 1.563rem;
  }

  .btn-ajout {
    font-size: 1.125rem;
  }

  .a-ev .actualite {
    padding: 1.875rem 3.125rem;
  }

  /* ------------------------ Ordinateur Page Modifier Amdinistrateur -------------------------*/

  .img-edition {
    width: 18.75rem;
    height: 18.75rem;
  }

  /* ------------------------ Ordinateur Page Index -------------------------*/

  .div-accueil {
    justify-content: space-around;
    gap: 0;
  }

  .div-img-fixe {
    justify-content: center;
  }

  .img-fixe {
    margin: 0;
    width: 100%;
  }

  .slider {
    max-width: 50rem;
    margin: 0;
  }

  .slider-dot {
    width: 1rem;
    height: 1rem;
  }



  .objectifs {
    margin: 3.75rem 0 3.75rem 0;
  }

  .obj {
    gap: 0.625rem;
  }

  .i-obj {
    font-size: 6.25rem;
  }

  .obj-chiffre {
    font-size: 1.563rem;
  }

  .obj-p {
    font-size: 1.375rem;
  }

  .section-actualite {
    margin: 3.125rem 15vh 3.125rem 15vh;
  }

  .titre-section {
    font-size: 1.875rem;
  }

  .toutes-actualites {
    grid-template-columns: auto auto auto auto;
    justify-content: space-between;
  }

  .actu-seule {
    gap: 0.938rem;
  }

  .titre-actu-seule {
    font-size: 1rem;
  }

  .date-actu-seule {
    font-size: 1.125rem;
  }

  .cat-actu-seule {
    font-size: 0.875rem;
  }

  .section-publication {
    padding: 3.125rem 15vh 3.125rem 15vh;
  }

  .titre-section-blanc {
    font-size: 1.875rem;
  }

  .publication-seule {
    padding: 1.563rem;
    gap: 1.563rem;
  }

  .img-publi-seule {
    width: 7.5rem;
    height: 7.5rem;
  }

  .reste-publi {
    gap: 0.938rem;
  }

  .titre-reference {
    flex-direction: row;
    gap: 1.875rem;
  }

  .titre-publication {
    font-size: 1.125rem;
  }

  .img-profil-auteur {
    width: 1.875rem;
    height: 1.875rem;
  }

  main .section-evenement {
    margin-bottom: 5rem;
  }

  .tous-evenements {
    margin: 3.125rem 6.25rem 0 6.25rem;
  }

  .titre-evenement {
    font-size: 1.313rem;
  }

  .date-ev {
    width: 13%;
    text-align: end;
  }

  .titre-second-evenement {
    font-family: "Recharge";
    color: var(--main-color);
    font-size: 1.063rem;
    margin: 0;
  }

  /* ------------------------ Ordinateur Page Footer -------------------------*/

  footer {
    padding: 1.875rem 3.75rem;
  }

  .footer-2 {
    flex-direction: row;
    justify-content: space-between;
  }

  .div-logo-part {
    width: auto;
    gap: 1.25rem;
  }

  .logo-part {
    width: 8.75rem;
  }

  .contact-lien {
    gap: 1.875rem;
  }

  .p-footer {
    margin-top: 1.25rem;
  }

  /* ------------------------ Ordinateur Page Projet -------------------------*/

  .main-site {
    margin: 3.125rem 15vh 3.125rem 15vh;
  }

  .div-img-projet {
    margin-bottom: 3.125rem;
  }

  .img-projet {
    width: 15.625rem;
    height: 15.625rem;
  }

  .carre-projet {
    padding: 0.625rem 1.25rem;
  }

  .carre-projet i {
    font-size: 1.25rem;
  }

  .p-carre-projet {
    font-size: 1rem;
  }

  .cache-carre {
    padding: 1.875rem;
  }

  .cache-carre img {
    width: 12.5rem;
    height: 12.5rem;
  }

  .p-cache {
    font-size: 1.125rem;
  }

  /*     carre page orga    */

  .div-carre-projet2-orga {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.25rem;
  }


  .big-div-carre-2-orga .marge-b {
    margin-bottom: 1.25rem;
    flex-direction: row;
  }


  /* ------------------------ Ordinateur Page Organisation -------------------------*/

  .img-organisation {
    max-width: 12.5rem;
    max-height: 12.5rem;
  }

  /* ------------------------ Ordinateur Page Actualités -------------------------*/

  .tous-btn-filtre {
    margin-bottom: 3.125rem;
    margin-top: 3.125rem;
    gap: 5rem;
  }

  .btn-filtre-0 {
    gap: 0.938rem;
  }

  .p-btn-filtre {
    font-size: 1.25rem;
  }

  .toutes-index-actu {
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
  }

  .toutes-index-actu.filtre {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
  }

  .index-actu {
    gap: 0.938rem;
  }

  .img-index-actu {
    width: 18.75rem;
    height: 18.75rem;
  }

  .date-index-actu {
    font-size: 1rem;
  }

  .cat-index-actu {
    font-size: 0.875rem;
  }

  .video-index-actu {
    font-size: 1.25rem;
  }

  /* ------------------------ Ordinateur Page Détails Actualités -------------------------*/

  .section-details-actu {
    gap: 1.875rem;
  }

  .section-details-actu .fleche-retour i {
    font-size: 1.5rem;
  }

  .titre-details-actu {
    font-size: 1.563rem;
  }

  .img-details-actu {
    width: 25rem;
    height: 25rem;
  }

  .p-details-actu {
    font-size: 1.25rem;
  }

  /* ------------------------ Ordinateur Page Publications -------------------------*/

  .section-index-publications {
    gap: 3.125rem;
  }

  .btn-filtre-publi {
    gap: 1.25rem;
  }

  .index-publi {
    padding: 1.563rem;
    gap: 1.563rem;
  }

  .img-index-publi {
    width: 10.4rem;
    height: 10.4rem;
  }

  .reste-index-publi {
    gap: 1.25rem;
  }

  .div-titre-ref-index-publi {
    display: flex;
    flex-direction: row;
    gap: 1.875rem;
    justify-content: space-between;
  }

  .titre-index-publi {
    font-size: 1.125rem;
  }

  .auteurs-index-publi {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.938rem;
  }

  /* ------------------------ Ordinateur Page Partenaires -------------------------*/

  .div-img-texte-partenaire {
    gap: 3.125rem;
  }

  .div-img-texte-partenaire p {
    font-size: 1.125rem;
  }

  .p-membre-partenaire {
    gap: 1.875rem;
  }

  .membre-partenaire {
    gap: 1.25rem;
  }

  .seul-membre-partenaire img {
    width: 2.5rem;
    height: 2.5rem;
  }

  .barre-partenaire {
    margin-top: 1.875rem;
  }

  /* ------------------------ Ordinateur Page Évènements -------------------------*/

  .tous-index-evenements {
    gap: 2.188rem;
  }

  /* ------------------------ Ordinateur Page Contact -------------------------*/

  html .main-contact {
    margin: 3.125rem 30vh 3.125rem 30vh;
  }

  .p-contact {
    width: 70%;
  }
}

@media all and (min-width: 1024px) and (max-width: 1444px) {
  /* ------------------------ Nest Hub Header/Menu Site/Administrateur -------------------------*/

  .header-administrateur .logo2 {
    width: 3.75rem;
  }

  .ordinateur {
    display: none;
  }

  .tel {
    display: initial;
  }

  .nav-menu .riquiqui {
    gap: 1.25rem;
  }

  .menu2 .petit {
    font-size: 1rem;
  }

  .main-maintenance {
    padding: 1.875rem 3.125rem;
  }

  .body-index .enleve {
    padding: 1.875rem 3.75rem;
  }

  /* ------------------------ Nest Hub Page Index -------------------------*/

  .div-accueil {
    align-items: center;
  }

  .slider {
    max-width: 40rem;
    margin: 0;
  }

  .section-actualite {
    margin: 3.125rem;
  }

  .img-sec-actu {
    width: 12.5rem;
    height: 12.5rem;
  }

  .titre-actu-seule {
    font-size: 0.875rem;
  }

  .section-publication {
    padding: 3.125rem;
  }

  /* ------------------------ Nest Hub Footer -------------------------*/

  .logo-part {
    width: 4.375rem;
  }

  /* ------------------------ Nest Hub Page Projet -------------------------*/

  .main-site {
    margin: 3.125rem;
  }

  .img-projet {
    width: 12.5rem;
    height: 12.5rem;
  }


  /* ------------------------ Nest Hub Page Organisation -------------------------*/

  .img-organisation {
    max-width: 9.375rem;
    max-height: 9.375rem;
  }

  /* ------------------------ Nest Hub Page Actualités -------------------------*/

  .toutes-index-actu {
    grid-template-columns: repeat(3, 1fr);
  }

  .toutes-index-actu.filtre {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
  }

  .img-index-actu {
    width: 15.625rem;
    height: 15.625rem;
  }

  /* ------------------------ Nest Hub Page Détails Actualités -------------------------*/

  .img-details-actu {
    width: 18.75rem;
    height: 18.75rem;
  }

  /* ------------------------ Nest Hub Page Contact -------------------------*/

  html .main-contact {
    margin: 3.125rem 15vh 3.125rem 15vh;
  }
}


/*    carre page orga     */
.div-carre-projet2-orga {
  display: flex;
  justify-content: center;
  gap: 2rem;
  align-items: center;
}


.big-div-carre-2-orga .marge-b {
  flex-direction: column;
}


/*-------------------------- Page Projet ----------------------------------*/
@media all and (min-width: 1324px) {
  .div-carre-projet {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    margin-top: 3.125rem;
    margin-bottom: 1.25rem;
    gap: 1.25rem;
  }

  .carre-projet:last-child {
    width: 100%;
    grid-column: span 1;
    grid-area: initial;
    justify-self: flex-end;
    margin-right: 0;
  }

  .carre-projet:nth-last-child(2) {
    justify-self: flex-start;
    margin-left: 0;
  }
}