/* ============ RESET DE BASE ============ */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
  color: #0f172a;
  background: linear-gradient(135deg,#ffd166 0%,#f4a261 100%);
}

/* Conteneur principal (reste sous l’image) */
.wrap {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Image bas-gauche, grande, collée */
.corner-img{
  position: fixed;
  left: 0;
  bottom: 0;
  height: 92vh;          /* ajuste 86–96vh si tu veux */
  width: auto;
  object-fit: contain;
  z-index: 1;            /* derrière le contenu */
  pointer-events: none;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.22));
  transform: translateX(-8px); /* mord un peu à gauche pour coller au bord */
  max-width: none;
}

/* Page au-dessus de l’image */
.page{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Bandeau “PROCHAINEMENT” bien grand et centré */
.banner{
  width: max-content;
  margin: 10px auto 18px;
  padding: 18px 42px;
  border-radius: 16px;
  background: #E53E3E;
  color: #fff;
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 46px);
  letter-spacing: .4px;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
}

/* Titre et URL centrés */
.title{
  text-align: center;
  font-weight: 800;
  font-size: clamp(28px, 3.8vw, 56px);
  margin: 6px 0 6px;
  text-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.subtitle{
  text-align: center;
  font-weight: 700;
  color: #334155;
  margin: 0 0 22px;
}

/* Deux colonnes : à gauche un espace qui “laisse la place” à l’image, à droite le texte */
.content{
  display: grid;
  grid-template-columns: min(44vw, 560px) 1fr; /* pousse le texte à droite */
  gap: 32px;
  align-items: start;
}
.spacer{ min-height: 1px; } /* colonne vide (réserve la place à l’image) */

.copy{
  max-width: 760px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.9;
  color: #334155;
}
.copy p{ margin: 0 0 16px; }
.copy strong{ font-weight: 800; color: #0f172a; }

/* --------- Responsive --------- */
@media (max-width: 980px){
  .corner-img{ position: absolute; height: 56vh; transform: none; }
  .content{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .spacer{ display: none; }
  .copy{ margin-inline: 6px; }
}
@media (max-width: 640px){
  .corner-img{ height: 46vh; }
  .copy{ font-size: 17px; }
}

/* Anti-cache si d’anciens styles traînent (au besoin) */
.banner, .title, .subtitle, .content, .copy, .corner-img, .page {
  will-change: auto;
}