/*
Theme Name: Variations Child
Template: variations
Author: alalimiteconvoyage
Description: Thème enfant de Variations pour personnalisation.
Version: 1.0
*/
/* Styles généraux pour html et body */
html, body {
  width: 100%;
  overflow-x: hidden; /* Empêche les barres de défilement horizontales */
}

body {
  background-color: #911133;
  color: #fefefe;
  font-family: var(--wp--preset--font-family--abel);
  font-size: clamp(1.743rem, 1.743rem + ((1vw - 0.2rem) * 2.285), 3rem); /* Taille de police fluide */
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  text-transform: capitalize;
  padding-right: 0;
  padding-left: 0;
}

/* Styles généraux pour les images */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

.wp-block {
  margin: 0;
}

/* Adaptation pour les écrans de taille tablette (max-width: 782px) */
@media screen and (max-width: 782px) {
  body {
    padding-right: 0;
    padding-left: 0;
  }

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

  .wp-block-column {
    width: 100%; /* Réduit les colonnes à 50% sur les petits écrans */
    display: flex;
    justify-content: center;
    margin-bottom: 20px; /* Ajoute un espace entre les colonnes */
	padding: 10px; /* Ajoute de l’espace interne */
    box-sizing: border-box;
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.8em;
  }

  p {
    font-size: 1em;
  }
}

/* Adaptation pour les petits écrans (max-width: 480px) */
@media screen and (max-width: 480px) {
  body {
    padding-right: 0;
    padding-left: 0;
  }

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

  .wp-block-column {
    width: 100%; /* Réduit les colonnes à 100% sur les très petits écrans */
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  h1 {
    font-size: 1.5em;
  }

  h2 {
    font-size: 1.3em;
  }

  p {
    font-size: 0.9em;
  }
}
/* === RESPONSIVITÉ POUR LES ARTICLES ET PAGES DE BLOG === */

/* Articles individuels */
body.single-post .wp-block-columns {
  flex-direction: column !important;
  gap: 20px;
}
body.single-post .wp-block-column {
  width: 100% !important;
  display: block;
}

/* Pages de catégorie (liste d’articles) */
body.archive.category .wp-block-columns {
  flex-direction: column !important;
  gap: 20px;
}
body.archive.category .wp-block-column {
  width: 100% !important;
  display: block;
}

/* Responsivité globale des colonnes pour tout type de contenu */
@media screen and (max-width: 782px) {
  .wp-block-columns {
    flex-direction: column !important;
    gap: 20px;
  }

  .wp-block-column {
    width: 100% !important;
    margin-bottom: 20px;
  }
}
/* === IMAGE MISE EN AVANT RESPONSIVE SUR MOBILE === */
@media screen and (max-width: 782px) {
  /* Conteneur de l'image mise en avant */
  .post-thumbnail,
  .single-post .wp-post-image,
  .wp-block-post-featured-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* L'image elle-même */
  .post-thumbnail img,
  .single-post .wp-post-image,
  .wp-block-post-featured-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }
}