/* =================================
   PAGE CLASSIQUE – BASE SAINE
   Compatible Kirby Layout Builder
   ================================= */

/* Sécurité globale */
.page-classique {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
background-color: #1d1c13;
}

/* Header de page */
.page-header {
  max-width: 1200px;
  padding: 0 1.5rem;
margin-top: 5vh;
}

.page-title {
  margin: 0;
  font-size: 2.6rem;
color: #cccccc;
}

.page-subtitle {
  margin-top: 0.5rem;
  opacity: 0.7;
color: #cccccc;
}

/* =================================
   LAYOUT BUILDER
   ================================= */

.page-builder {
  width: 100%;
}

/* Section (layout) */
.layout {
  display: flex;
  flex-wrap: nowrap; /* 🔥 nowrap sur desktop pour garder les colonnes côte à côte */
  width: 100%;
  box-sizing: border-box;
  padding: 0 1.5rem;
  gap: var(--gap, 2rem);
}

/* Colonnes */
.layout-col {
  box-sizing: border-box;
  min-width: 0;
  flex-grow: 1;
}

/* Gestion des spans Kirby (12 colonnes) */
.layout-col {
  flex-basis: calc(var(--span, 12) / 12 * 100%);
  max-width: calc(var(--span, 12) / 12 * 100%);
}

/* =================================
   ESPACEMENTS DE SECTIONS
   ================================= */

.margin-none   { margin: 0; }
.margin-small  { margin: 2rem 0; }
.margin-medium { margin: 4rem 0; }
.margin-large  { margin: 6rem 0; }

.gap-none   { gap: 0; }
.gap-small  { gap: 1rem; }
.gap-medium { gap: 2rem; }
.gap-large  { gap: 4rem; }

/* =================================
   CONTENU GÉNÉRIQUE
   ================================= */

/* Sécurité anti débordement */
.page-classique img,
.page-classique iframe,
.page-classique video {
  max-width: 100%;
  height: auto;
}

/* Texte long (URLs, mots très longs, etc.) */
.page-classique p,
.page-classique li,
.page-classique div {
  word-break: break-word;
  overflow-wrap: anywhere;
    color: #cccccc;
}

/* =================================
   RESPONSIVE
   ================================= */

@media (max-width: 900px) {
  .layout {
    flex-direction: column; /* 🔥 AJOUTÉ: force les colonnes verticalement */
    gap: 1.5rem;
  }
  
  .layout-col {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100%; /* 🔥 AJOUTÉ: garantit la largeur complète */
  }
}

@media (max-width: 600px) {
  .page-header {
    margin-bottom: 2rem;
  }
  
  .page-title {
    font-size: 2rem; /* 🔥 AJOUTÉ: titre plus petit sur mobile */
  }
  
  .layout {
    padding: 0 1rem;
    gap: 1rem; /* 🔥 AJOUTÉ: gap réduit sur très petit écran */
  }
}


/* ==========================
   INTRO AVEC IMAGE
========================== */

.page-intro-block {
  max-width: 1200px;
  margin: 6vh auto 4rem;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
}

.page-intro-text {
  color: #cccccc;
}

.page-intro-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* Mobile */
@media (max-width: 900px) {
  .page-intro-block {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .page-intro-image {
    order: -1; /* image au-dessus sur mobile */
  }
}

.block-image {
  margin: 3rem 0;
  display: flex;
  justify-content: center;
}

.block-image.align-left {
  justify-content: flex-start;
}

.block-image.align-right {
  justify-content: flex-end;
}

.block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.block-image figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  opacity: 0.7;
  text-align: center;
}

.page-hero {
  padding: 1rem 0rem 0rem 1rem;
  display: grid;                  /* ← CRITIQUE */
  grid-template-columns: 1.2fr 0.8fr;
  gap: 6vw;
  align-items: flex-start;
}


.page-hero-text {
  max-width: 720px;
}

.page-title {
  margin-bottom: 1rem;
}

.page-subtitle {
  margin-bottom: 2rem;
  opacity: 0.8;
}

.page-hero-text {
  padding-top: 2vh;
}

.page-hero-image {
  padding-top: 2vh;
}


.page-intro {
  margin-top: 2rem;
  line-height: 1.6;
  font-style: italic;
padding: 0rem;
}


.page-hero-image {
  display: flex;
  justify-content: center;
  align-items: center; 
}


.page-hero-image img {
  width: 100%;
  max-width: 10rem;
  height: auto;
  display: block;
      margin-top: 0;

}

/* Mobile */
@media (max-width: 768px) {
  .page-hero {
    grid-template-columns: 1fr;
  }

  .page-hero-image {
    order: -1;
    margin-bottom: 3rem;
  }
}