/**
 * Base Design
 * HTML, Body, Typographie générale
 */

html {
  font-size: 16px;
  background-color: #fafafa;
}

body {
  font-family: var(--main-font);
  font-size: var(--fs-body);
  background-color: var(--color-dark);
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-white);
  padding: 7px 19px;
  line-height: 1.7;
}

html, body {
  overflow-x: hidden;
}

/* Titres */
h1.txt-inline {
  font-family: var(--main-font), var(--heading-font), sans-serif;
  font-size: 2rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  flex: 1;
}

h2 {
  font-family: var(--heading-font), var(--main-font), sans-serif;
  font-size: var(--fs-subtitle);
  color: var(--color-gray-light);
  font-weight: bolder;
  text-align: center;
  text-indent: 33px;
  margin: 1rem 0;
  line-height: 1.5;
}

/* Strong */
strong {
  display: inline;
  font-family: var(--main-font);
  font-weight: var(--fw-semibold);
}

/* Légendes (classe .legend) */
.legend {
  display: flex;
  font-size: var(--fs-title);
  color: var(--color-gray-light);
  font-weight: bold;
  text-align: center;
  border-radius: 7px;
  margin: 1rem 0;
  line-height: 1.5;
}

.legend + p,
p + .legend {
  margin: 1rem 0;
}

ul + .legend {
  font-family: var(--heading-font), var(--main-font), sans-serif;
  font-size: var(--fs-subtitle);
  color: var(--color-gray-light);
  font-weight: bolder;
  text-indent: 33px;
}

/* Liens */
a {
  margin: auto;
  text-decoration: none;
  margin-top: 11px;
  font-weight: bolder;
  color: var(--color-orange);
}

/* Listes - Définitions (dl, dt, dd) */
dt p {
  font-family: var(--main-font), var(--heading-font), sans-serif;
  color: var(--color-orange);
  font-size: var(--fs-body);
  text-align: center;
}

dl,
dd .italic {
  color: var(--color-white);
  text-align: center;
  letter-spacing: 0.2rem;
}

#typoExpoPro,
#typoDepuis,
#typoExpoProSecond,
#typoExpoProThird {
  font-family: var(--body-font);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
}

/* Stage - titre orange + date fine */
.devStage-title {
  display: inline;
  font-size: var(--fs-subtitle);
  color: var(--color-orange);
  font-weight: var(--fw-normal);
  text-indent: 0;
}

.devStage-title .italic {
  color: var(--color-gray-light);
  font-weight: var(--fw-light);
}

#typoExpoPro strong {
  color: var(--color-gray-light);
}

.stage-title .italic {
  color: var(--color-gray-light);
  font-weight: var(--fw-light);
}

/* Espaceur invisible */
.spacer-separator {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0.7rem auto;
  background-color: transparent;
}

/* Booster la zone de clic sans changer ton design visuel */
#telNum, #emailAdresse {
  display: inline-block;
  min-height: 24px; /* Augmente la hauteur perçue */
  padding: 8px 0;   /* Ajoute de la zone cliquable invisible */
  margin: 4px 0;    /* Espace les liens entre eux */
}

/* Si ce sont des icônes/liens dans une liste */
.info-contact a {
  padding: 10px; /* Crée une "bulle" de clic autour du texte */
}