html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ================================
   FOND
================================ */
.fond-carnet-doyen {
  background-image: url("../images/fonds/fond_carnet_doyen.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #fff;
}

/* ================================
   CONTENEUR PRINCIPAL
   (CORRECTION MAJEURE)
================================ */
.content_carnet {
  max-width: 900px;
  margin: 0rem auto; /* ↓ réduit l’espace header */
  padding: 1rem;

  display: flex;
  justify-content: flex-end;
  min-height: calc(100vh - 160px); /* stabilise sur grands écrans */
}

/* ================================
   LETTRE (PAGE CAHIER)
================================ */
.carnet-letter {
  width: 48%; /* légèrement réduit pour éviter débordement visuel */

  background: url("../images/page_cahier.webp") no-repeat center/cover;

  padding: 5% 24%;

  color: #3b2a1a;
  font-family: 'Cursive', serif;

  font-size: 0.98rem;
  line-height: 1.5;

  text-align: left;
}

/* ================================
   LIGNES TEXTE
================================ */
.letter-line {
  opacity: 0;
  margin: 0 0 0.6em 0;
  line-height: 1.4;
  transition: opacity 0.5s ease;
}

/* ================================
   BOUTON
================================ */
.letter-end .btn-carnet {
  background: none;
  border: none;

  color: #3b2a1a;
  text-decoration: underline;

  cursor: pointer;
  font-weight: bold;
  font-size: 1.05rem;
  padding: 0;
}

.letter-end .btn-carnet:hover {
  color: #5a3e2d;
}

/* ================================
   ANIMATION
================================ */
.fade-in {
  animation: fadeIn 1.2s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ================================
   MOBILE
================================ */
@media (max-width: 768px) {
  .content_carnet {
    justify-content: center; /* 🔥 CENTRAGE */
    align-items: center;

    padding: 1rem;
    margin: 1rem auto;

    min-height: auto;
  }

  .carnet-letter {
    width: 90% !important; /* empêche débordement */
    max-width: 90%;
    padding: 6% 12%;
    margin: 0 auto; /* sécurité centrage */

    font-size: 0.9rem;
  }
}