/* ===== STRUCTURES & MISES EN PAGES ===== */

/* Conteneur limité en largeur dont le contenu est centré */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--espacement-md);
    width: 100%;
}

/* Colonne avec espacement moyen */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--espacement-md);
}

/* Centrage du contenu dans la colonne */
.stack--center {
    align-items: center;
    justify-content: space-evenly;
}

/* Alignement wrap avec espacement moyen */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacement-md);
    width: 100%;
}

/* Centrage du contenu dans l'alignement wrap */
.row--center {
    justify-content: center;
}

.row--justif-evenly {
    justify-content: space-evenly;
}

.no-gap {
    gap: 0;
}

/* Adaptations ou non des éléments flex */
.flex--auto {
    flex: auto;
}

.flex--grow {
    flex: 1;
}

.flex--shrink {
    flex-shrink: 1;
}

.flex--full-center {
    flex: 100%;
    text-align: center;
}

/* Grille */
.grid {
  display: grid;
  padding: var(--espacement-lg);
  grid-template-areas: 
    "img1 text1"
    "text2 text2"
    "text3 img2";
  gap: var(--espacement-lg);
  align-items: center;
  justify-content: center;
  text-align: justify;
}

#img1 {
    grid-area: img1;
  padding: var(--espacement-lg);
}

#text1 {
    grid-area: text1;
}
#text2 {
    grid-area: text2;
}
#text3 {
    grid-area: text3;
}
#img2 {
    grid-area: img2;
  padding: var(--espacement-lg);
}

/*.grid img {
  width: auto;
  height: 50vh;
  align-self: center; /* Centre l'image verticalement */
/*}

.grid div {
  display: flex;
  flex-direction: column;
  justify-content: space-around; /* Distribue l'espace entre les paragraphes */
  /*height: 100%;
}

.grid div p {
  margin: 0;
}

/* Bloc de contenu de fond blanc */
.card {
    background-color: var(--couleur-blanc);
    padding: var(--espacement-md);
    border-radius: var(--border-radius-md);
    width: 100%;
}

.text-justify {
    text-align: justify;
}

.text-center {
    text-align: center;
}

/* ===== COMPOSANTS RÉUTILISABLES =====*/

/* Navigation */
.nav-list {
    list-style: none;
    display: flex;
    gap: var(--espacement-md);
}

.nav-list--vertical {
    flex-direction: column;
}

.nav-link {
    text-decoration: none;
    color: var(--couleur-clair);
    font-weight: 700;
    padding: var(--espacement-xs);    /* espacement vertical pour agrandir la zone cliquable */
    border-top: solid 2px var(--couleur-fonce);
    border-bottom: solid 2px var(--couleur-fonce);
    transition: 0.2s ease-in-out;
}

.nav-link:hover {
    color: var(--couleur-primaire);
    border-top-color: var(--couleur-clair);
    border-bottom-color: var(--couleur-clair);
}

.nav-link:focus {
    border-top-color: var(--couleur-primaire);
    border-bottom-color: var(--couleur-primaire);
}

/* Boutons */
.btn {
    cursor: pointer;
    border: none;
    background: transparent;
    display: inline-block;
    width: fit-content;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: var(--btn-padding-vertical) var(--btn-padding-horizontal);
    border-radius: var(--border-radius-md);
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    margin: var(--btn-margin-md);
    transition: transform 0.2s, background-color 0.2s, color 0.2s;
}
.btn:hover {
    background-color: var(--couleur-clair);
    color: #0a0a0a;
}

.btn--primary {
    background: var(--couleur-primaire-light);
    padding: calc(2 * var(--btn-padding-vertical)) calc(2 * var(--btn-padding-horizontal));
    color: var(--couleur-blanc);
    font-weight: 700;
}

.btn--primary:hover {
    background: var(--couleur-clair);
    color: var(--couleur-primaire);
    transform: scale(1.1);
}

.btn--outline {
    border: solid var(--couleur-clair) 1px;
    margin: var(--btn-margin-xs);
}
/* Map carrée adaptative */
.map {
    position: relative;
    width: var(--map-size, 20rem);
    padding-bottom: var(--map-size, 20rem); /* Maintient le ratio carré */
    height: 0;
    overflow: hidden;
}

.map iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/*Tableau */
table {
    border-collapse: collapse;
}
th, td {
    padding: var(--espacement-sm) var(--espacement-md);
    border: solid 1px;
}

th {
    background-color: none;
}

td {
    background-color: var(--couleur-clair);
}
.table--col {
    background-color: var(--couleur-primaire-light);
    border: solid 2px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: var(--espacement-md);
    align-items: center;
}

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}