.page-header span.center{
  display: inline-block;
  width: 100%;
  text-align: center;
}
#aboutPage {
  --white: #f3f4f4;
  --gray: #7a7a7a;
  --brand-primary: #7c00ff;
  --brand-secondary: #fd5016;
  --base-color: #1d1f24;
}

#aboutPage {
  margin-top: -1rem;
}


.about {
  margin-top :54px;
}

.aboutPage__intro {
  width: 100%;
  margin: auto;
  text-align: center;
  margin-bottom: 4rem;
  font-weight: 200;
}

@media (min-width: 768px) {
  .aboutPage__intro {
    width: 80%;
    margin-bottom: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .aboutPage__intro {
    width: 60%;
  }
}

.aboutPage__intro p {
  font-size: 1rem;
  font-weight: 200;
}

/* TIMELNE */

.aboutPage__timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 30px;
  margin-top: 2rem;
}
.aboutPage__timeline::before {
  content: '';
  background: linear-gradient(to right, var(--brand-primary), var(--brand-secondary));
  height: 2px;
  /* width: calc(100% + ((100vw - 100%) / 2)); */
  width: calc((100% + ((100vw - 100%) / 2)) - (100% / 6) + 30px);
  position: absolute;
  top: 0;
  left: calc(-50vw + 50%);
  z-index: 2;
}
.aboutPage__timeline::after {
  content: '';
  height: 2px;
  width: 100vw;
  position: absolute;
  top: 0;
  border-top: 2px dotted var(--brand-secondary);
}

.aboutPage__timeline__item{
  position: relative;
  padding-top: 1rem;
  cursor: default;
}

.aboutPage__timeline__item.last__item .timeline__date{
  color: var(--brand-secondary);
  text-transform: uppercase;
  font-weight: bold;
}

.aboutPage__timeline__item:hover .timeline__date {
  color: var(--brand-primary);
  font-weight: bold;
}

.aboutPage__timeline__item.last__item:hover .timeline__date {
  color: var(--brand-secondary);
  font-weight: bold;
}

.aboutPage__timeline__item:hover .timeline__date,
.aboutPage__timeline__item:hover .timeline__txt
{
  -ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
.aboutPage__timeline__item.last__item:hover .timeline__date,
.aboutPage__timeline__item.last__item:hover .timeline__txt
{
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

.aboutPage__timeline__item:hover .timeline__txt {
  color: var(--base-color);
}

.aboutPage__timeline__item:hover::before {
  width: 15px;
  height: 15px;
  border: 3px solid var(--brand-primary);
  background: white;
  top: -6px;
}

.aboutPage__timeline__item.last__item:hover::before {
  width: 10px;
  height: 10px;
  border: none;
  background: var(--brand-secondary);
  top: -4px;
}

.aboutPage__timeline__item::before {
  content: '';
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--brand-primary);
  top: -4px;
  left: 0;
  border-radius: 100%;
  z-index: 3;
}
.aboutPage__timeline__item.last__item::before {
  background: var(--brand-secondary);
}

.timeline__txt {
  color: var(--gray);
  padding-top: 5px;
}

/* GRID CONTENT */    

.aboutPage__grid {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

.aboutPage__grid__ttl {
  grid-column: 1 / span 2;
  text-align: right;
  font-size: 1.65rem;
  font-family: 'Bebas Neue';
  line-height: 1.5rem;
  padding-left: 11.7rem;
}
@media (min-width: 768px) {
  .aboutPage__grid__ttl {
  grid-column: 1 / span 2;
  text-align: right;
  font-family: 'Bebas Neue';
  padding-left: 11.7rem;
    font-size: 2.25rem;
    line-height: 2rem;
  }

}
@media (min-width: 1200px) {
  .aboutPage__grid__ttl {
    font-size: 2.8rem;
    line-height: 2.6rem;
  }
}

.aboutPage__grid__subttl {
  font-size:1.6rem;
}

.aboutPage__grid__ttl .outline {
  -webkit-text-stroke: 1px var(--base-color)
}

.aboutPage__grid__img {
  grid-column: 3 / span 2;
}
.aboutPage__grid__img img {
  width: 80%;
}

.aboutPage__grid__content_1 {
  grid-column: 1;
  text-align: right;
  padding: 0 0 18px 0;
  }

.aboutPage__grid__content_1 a {
  text-transform: uppercase;
  font-size: 1.1rem;
  margin-top: 0.5rem;
  display: inline-block;
}
.aboutPage__grid__content_1 p {
  font-size: .9375rem;
  margin-top: 0.5rem;
  padding: 0 0 0 180px;
  display: inline-block;
  font-weight: 300;
}


.aboutPage__grid__content_2 {
  grid-column: 1;
  text-align: left;
  font-size: 1.1rem;
}

.aboutPage__grid__content_2 p {
  font-size:.9375rem;
  margin-top: 0.5rem;
  padding: 0 0 44px 46px;
  display: inline-block;
  font-weight: 200 !important;
}

.aboutPage__grid__content_3 {
  grid-column: 1;
  text-align: right;
}


/* HIGHLIGHT */

#aboutPage .highlight__txt {
  color: initial;
}

#aboutPage .highlight::after {
  border: 1px solid var(--gray);
}


/****************************************** STYLE LICENCE WEB ******************************************************/


.aboutPage__selection {
  width: 70%;
  margin: auto;
  margin-bottom: auto;
  text-align: center;
  margin-bottom: 2rem;
}

.selection-produits p {
  text-align:center;
  font-size: 1rem;
  font-weight:200 !important;
}

.selection-produits {
  text-align:center;
  margin-top: 1rem;
}

.legende-photo
{
  font-size:12px;
  color:#a7a7a7;
  display: block;
}

/* Conteneur de la liste */
.styled-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-size: .9rem;
}

/* Élément de liste */
.styled-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px; /* Espacement entre les éléments */
}

/* Style pour le point */
.styled-list .dot {
  width: 4px;
  height: 4px;
  background-color: #7c00ff; /* Couleur du point */
  border-radius: 50%; /* Cercle parfait */
  margin-right: 5px; /* Espace entre le point et le texte */
  margin-top: 8px; /* Alignement avec le texte */
}

/* Conteneur de contenu */
.styled-list .content {
  display: flex;
  flex-direction: column;
}

/* Titre principal */
.styled-list strong {
  font-size: 16px;
  color: black;
}

/* Description secondaire */
.styled-list .description_recompense {
  font-size: 0.9rem;
  font-weight: normal;
}

/* Texte en surbrillance */
.styled-list .recompense {
  font-size: 1rem;
  color: #7c00ff;
  margin-top: 2px;
  font-weight: 300;
}



/* Conteneur principal */
.grid-container {
  display: grid;
  grid-template-columns: 3fr 2fr 0fr; /* Colonnes avec largeurs personnalisées */
  gap: 48px;
  margin: 0 0 0 -51px;
  padding-top:80px;
  width: 100%;
  max-width: 1200px; /* Largeur maximale */
}
.grid-container-1 {
  display: grid;
  grid-template-columns: 3fr 2fr 1fr; /* Colonnes avec largeurs personnalisées */
  gap: 10px;
  padding-left: 40px;
  width: 100%;
  max-width: 1200px; /* Largeur maximale */
}
/* Colonne 1 : Texte aligné à droite en bas */
.column-1 {
  text-align: right;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.column-1 h2 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.column-1 a {
  display: inline-block;
  margin-top: 10px;
  color: var(--brand-primary);
}

.column-1 img {
  max-width: 100%; /* L'image occupe toute la largeur disponible */
  height: auto;
}

/* Colonne 2 : Texte aligné à gauche */
.column-2 {
  text-align: left; /* Alignement à gauche */
}

.column-2 h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.column-2 img {
  max-width: 100%;
  height: auto;
}

/* Colonne 3 : Récompenses */
.column-3 {
  padding: 10px;
  text-align: left; /* Alignement à gauche */
}

.column-3 h2 {
  font-size: 1.6rem;
  margin-bottom: 15px;
}

.column-3 img {
  max-width: 100%;
  height: auto;
}

/* AJOUT DE NOUVEAUX STYLES RESPONSIVE */
@media (max-width: 768px) {
  /* Ajustement pour le conteneur principal en mobile */
  .grid-container, .grid-container-1 {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  
  /* Adaptation du titre principal pour mobile */
  .aboutPage__grid__ttl {
    grid-column: 1;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    font-size: 1.4rem;
    line-height: 1.3rem;
    margin-bottom: 10px;
  }
  
  /* Adaptation des images pour mobile */
  .aboutPage__grid__image_2 {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .aboutPage__grid__image_2 img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }
  
  /* Adaptation des blocs de contenu pour mobile */
  .aboutPage__grid__content_1, .aboutPage__grid__content_2 {
    grid-column: 1;
    text-align: center;
    padding: 0 10px 0px 10px;
  }
  
  .aboutPage__grid__content_1 p, .aboutPage__grid__content_2 p {
    padding: 0;
    margin: 10px 0;
    display: block;
    text-align: center;
  }
  
  /* S'assurer que la section récompenses est visible en mobile */
  .aboutPage__grid__image_3 {
    width: 100%;
    padding: 0 10px 20px 10px;
    display: block;
    clear: both;
  }
  
  /* Adapter les colonnes de récompenses en mobile */
  .awards-column {
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }
  
  /* Rendre responsive la timeline en mobile */
  .aboutPage__timeline {
    grid-template-columns: 1fr;
    grid-gap: 15px;
  }
  
  /* Ajuster les images du grid en mobile */
  .aboutPage__grid {
    display: block;
    margin: 20px 0;
  }
  
  .aboutPage__grid div {
    width: 100%;
    margin-bottom: 15px;
  }
  
  .aboutPage__grid img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

.aboutPage__selection
  {
      width: 100%;
  }


}

/* Ajustements spécifiques pour les très petits écrans */
@media (max-width: 576px) {
  .aboutPage__grid__ttl {
    font-size: 2rem;
    line-height: 2rem;
  }
  
  .aboutPage__grid__subttl {
    font-size: 1.6rem;
    text-align: center;
  }
  
  .aboutPage__grid__content_1 a {
    font-size: 1rem;
    margin: 10px auto;
    display: block;
  }
  
  /* Centrer tout le contenu en mobile */
  .column-1, .column-2 {
    text-align: center;
  }
  
  /* Assurer que les récompenses sont bien alignées */
  .styled-list {
    padding-left: 15px;
  }
  
  .styled-list li {
    justify-content: flex-start;
  }
  .aboutPage__selection
  {
      width: 100%;
  }
}

/* Style pour le grid pour assurer que les images sont responsive */
#aboutPage__grid, .aboutPage__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.aboutPage__grid div {
  text-align: center;
}

.aboutPage__grid img {
  max-width: 100%;
  height: auto;
}

.aboutPage__grid__image_3 {
  text-align: left;
  padding: 0 0 40px 46px;
  width: 100%;
  clear: both;
  display: table;
}

@media (max-width: 768px) {
  .aboutPage__grid__image_3 {
    padding: 0 15px 20px 15px;
  }
}

.aboutPage__grid__image_2 {
  text-align: left;
}

@media (max-width: 768px) {
  .aboutPage__grid__image_2 {
    text-align: center;
  }
}

.grid-item.column-2-3 {
  grid-column: 2 / 3;
  padding: 0px;
  text-align: left;
}

@media (max-width: 768px) {
  .grid-item.column-2-3 {
    grid-column: 1;
    padding: 10px;
    text-align: center;
  }
}

.aboutPage__title {
  text-align: right;
  font-size: 1.2rem;
  font-family: 'Bebas Neue';
  line-height: 1.5rem;
  padding-left: 11.7rem;
}

@media (max-width: 768px) {
  .aboutPage__title {
    text-align: center;
    padding-left: 0;
  }
}

.aboutPage__grid__image_3 h2 {
  width: 100%;
  text-align: left;
}

@media (max-width: 768px) {
  .aboutPage__grid__image_3 h2 {
    text-align: center;
  }
}

.awards-column {
  display: table-cell;
  width: 50%;
  vertical-align: top;
}

/* Support pour les grilles CSS modernes */
@supports (display: grid) {
  .aboutPage__grid__image_3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
  }
  
  .aboutPage__grid__image_3 h2 {
    grid-column: 1 / span 2;
  }
  
  .awards-column {
    width: auto;
  }
}

/* Style amélioré pour mobile */
@media (max-width: 576px) {
  .awards-column {
    display: block;
    width: 100%;
    margin-bottom: 0px;
  }

 .about {
  margin-top :10px;
} 

.aboutPage__intro {
  margin-bottom: 1rem;
}

  
  @supports (display: grid) {
    .aboutPage__grid__image_3 {
      display: grid;
      grid-template-columns: 1fr;
      padding-bottom: 10px;
    }
    
    .aboutPage__grid__image_3 h2 {
      grid-column: 1;
      text-align: center;
    }
  }
}

.outline 
{
  display:inline;
}