@font-face {
  font-family: 'Avenue de Madison';
  src: url('Avenue de Madison.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ====== Base / Reset ====== */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
html, body { min-height: 100vh; }
body { display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url('photo_beige.jpg'); background-size: cover; background-position: center; padding: 10px; }
img { max-width: 100%; display: block; }

:root {
  --brand: rgb(48, 36, 33);
  --text: #333;
  --box-bg: rgba(255, 255, 255, 0.9);
}

/* ====== Titres ====== */
h1.page-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 18px;
}

/* Spécifique aux titres de l'index */
body.index-page h2 {
  font-family: 'Avenue de Madison', sans-serif;
}

/* ====== Utilitaires ====== */
.center { text-align: center; }
.small-text { font-size: 12px; }
body.index-page {
  position: relative;
  min-height: 100vh; /* garantit que le footer a un vrai "bas" */
}

/* ====== En-tête & Navigation ====== */
.header { position: absolute; top: 0; left: 0; width: 100%; background-color: var(--brand); padding: 10px 0; text-align: center; color: #fff; z-index: 10; }
.header nav a { color: #fff; text-decoration: none; margin: 0 15px; font-size: 14px; }
.header nav a.active { font-weight: 600; }

/* ====== Pied de page ====== */
    .footer {
            position: fixed;
            left: 0;
            width: 100%;
            bottom: 0;
            background-color: rgb(48, 36, 33);
            color: white;
            text-align: center;
            padding: 5px;
          font-size: 12px; /* Diminue la taille du texte */
        }

/* ====== Conteneur principal ====== */
.container { margin-top: 50px; background-color: var(--box-bg); padding: 20px; max-width: 95%; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin-bottom: 30px; }

/* ====== Mise en page colonnes ====== */
.content { display: flex; flex-direction: row; gap: 20px; }
.column { flex: 1; text-align: justify; color: black; font-size: 12px; }
.column p { margin-bottom: 10px; }
.column ul { padding-left: 20px; }

/* ====== Responsive ====== */
@media (max-width: 768px) {
  .content { flex-direction: column; }
}

@media (max-width: 480px) {
  body { padding: 5px; }
  .header nav a { font-size: 12px; margin: 0 10px; }
}

/* ====== Index uniquement (sans header) ====== */
.container.split {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.left, .right {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}

/* Titres gauche */
.left h1 {
  font-size: 30px;
  margin-bottom: 20px;
  color: rgb(48, 36, 33);
}
.left h2 {
  font-size: 60px;
  margin-bottom: 30px;
  color: rgb(48, 36, 33);
}
.left h3 {
  font-size: 20px;
  margin-bottom: 30px;
  color: rgb(48, 36, 33);
}

/* Boutons (communs liens + formulaires) */
.buttons { margin-top: 20px; }

.buttons a,
.buttons button {
  text-decoration: none;
  padding: 8px 16px;
  margin: 10px;
  background-color: rgb(106, 98, 79);
  color: white;
  border-radius: 5px;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

.buttons a:hover,
.buttons button:hover {
  background-color: rgb(79, 72, 59);
}

/* Colonne droite */
.right img {
  width: 100%;
  max-height: 55%;
  object-fit: cover;
  margin-top: 20px;
}
.right p {
  font-size: 14px;
  font-style: italic;
  text-align: justify;
  padding: 10px;
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .container.split { flex-direction: column; }
  .left, .right { width: 100%; padding: 10px; }
  .left h1 { font-size: 24px; margin-top: 20px; }
  .left h2 { font-size: 36px; }
  .left h3 { font-size: 15px; }
  .buttons a, .buttons button { font-size: 12px; padding: 6px 12px; }
  .right img { max-height: 40%; }
  .right p { font-size: 12px; }
}

/* ====== Styles spécifiques à la page Forms ====== */
body.form-page .container {
  margin-top: 60px;
  max-width: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

body.form-page .form-subtitle {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 15px;
}

body.form-page form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

body.form-page input,
body.form-page textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

/* Bouton identique à la page index */
body.form-page button {
  background-color: rgb(106, 98, 79);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

body.form-page button:hover {
  background-color: rgb(85, 78, 62);
}

/* Responsive Forms */
@media (max-width: 768px) {
  body.form-page .container {
    max-width: 90%;
    padding: 10px;
  }
}

/* --- Correctif espace vertical entre colonnes sur mobile --- */
@media (max-width: 768px) {
  .content {
    flex-direction: column; /* déjà présent plus haut, on le répète ici pour certitude */
    gap: 0;                 /* supprime l'espace devenu vertical */
  }
  .column {
    margin: 0;              /* retire les marges résiduelles */
    padding: 0;             /* retire les paddings qui créent un "trou" visuel */
  }
}