/**
 * 3iS Theme - Styles des blocs Gutenberg
 * 
 * @package 3iS_Theme
 * @version 1.0.2
 */

/* Bloc Groupe */
.wp-block-group.3is-group {
  margin: var(--spacing-8) 0;
}

.wp-block-group.3is-group.has-background {
  padding: var(--spacing-8) var(--spacing-6);
  border-radius: var(--radius-lg);
}

/* Bloc Colonnes */
.wp-block-columns.3is-columns {
  margin: var(--spacing-8) 0;
  gap: var(--spacing-8);
}

.wp-block-column.3is-column {
  margin: 0;
}

/* Bloc Titre */
.wp-block-heading.3is-heading {
  margin: var(--spacing-6) 0 var(--spacing-4) 0;
  line-height: var(--line-height-tight);
}

.wp-block-heading.3is-heading h1 {
  font-size: var(--font-size-4xl);
  color: var(--3is-black);
}

.wp-block-heading.3is-heading h2 {
  font-size: var(--font-size-3xl);
  color: var(--3is-black);
}

.wp-block-heading.3is-heading h3 {
  font-size: var(--font-size-2xl);
  color: var(--3is-black);
}

.wp-block-heading.3is-heading h4 {
  font-size: var(--font-size-xl);
  color: var(--3is-black);
}

.wp-block-heading.3is-heading h5 {
  font-size: var(--font-size-lg);
  color: var(--3is-black);
}

.wp-block-heading.3is-heading h6 {
  font-size: var(--font-size-base);
  color: var(--3is-black);
}

/* Bloc Paragraphe */
.wp-block-paragraph.3is-paragraph {
  margin: 0 0 var(--spacing-4) 0;
  line-height: var(--line-height-relaxed);
  color: var(--3is-gray-700);
}

.wp-block-paragraph.3is-paragraph:last-child {
  margin-bottom: 0;
}

/* Bloc Bouton / CTA */
.wp-block-button.3is-button {
  margin: var(--spacing-4) 0;
}

.wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-decoration: none;
  border: none;
  border-radius: 8px;
  background: var(--3is-red);
  color: var(--3is-white);
  cursor: pointer;
  transition: var(--transition-colors), transform 0.2s ease, box-shadow 0.2s ease;
  min-height: var(--button-height);
}

.wp-block-button__link:hover {
  background-color: var(--3is-red);
  color: var(--3is-white);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.wp-block-button__link:focus {
  outline: 2px solid var(--universe-color);
  outline-offset: 2px;
}

/* Variantes de boutons */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--universe-color);
  border: 2px solid var(--universe-color);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--universe-color);
  color: var(--3is-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.wp-block-button.is-style-fill .wp-block-button__link {
  background-color: var(--universe-color);
  color: var(--3is-white);
}

/* Bloc Image */
.wp-block-image.3is-image {
  margin: var(--spacing-6) 0;
}

.wp-block-image.3is-image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.wp-block-image.3is-image figcaption {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--3is-gray-600);
  text-align: center;
  font-style: italic;
}

/* Bloc Galerie */
.wp-block-gallery.3is-gallery {
  margin: var(--spacing-6) 0;
  gap: var(--spacing-4);
}

.wp-block-gallery.3is-gallery .wp-block-image {
  margin: 0;
}

.wp-block-gallery.3is-gallery .wp-block-image img {
  border-radius: var(--radius-md);
  transition: var(--transition-transform);
}

.wp-block-gallery.3is-gallery .wp-block-image img:hover {
  transform: scale(1.05);
}

/* Bloc Citation */
.wp-block-quote.3is-quote {
  margin: var(--spacing-6) 0;
  padding: var(--spacing-6);
  border-left: 4px solid var(--universe-color);
  background-color: var(--3is-gray-50);
  border-radius: var(--radius-md);
}

.wp-block-quote.3is-quote p {
  font-size: var(--font-size-lg);
  font-style: italic;
  color: var(--3is-gray-700);
  margin-bottom: var(--spacing-4);
}

.wp-block-quote.3is-quote cite {
  font-size: var(--font-size-sm);
  color: var(--3is-gray-600);
  font-style: normal;
  font-weight: var(--font-weight-medium);
}

/* Bloc Liste */
.wp-block-list.3is-list {
  margin: var(--spacing-4) 0;
}

.wp-block-list.3is-list li {
  margin-bottom: var(--spacing-2);
  line-height: var(--line-height-relaxed);
}

.wp-block-list.3is-list ul,
.wp-block-list.3is-list ol {
  margin: 0;
  padding-left: var(--spacing-6);
}

/* Bloc Code */
.wp-block-code.3is-code {
  margin: var(--spacing-6) 0;
}

.wp-block-code.3is-code code {
  display: block;
  padding: var(--spacing-4);
  background-color: var(--3is-gray-100);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-x: auto;
}

/* Bloc Préformaté */
.wp-block-preformatted.3is-preformatted {
  margin: var(--spacing-6) 0;
}

.wp-block-preformatted.3is-preformatted pre {
  padding: var(--spacing-4);
  background-color: var(--3is-gray-100);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-x: auto;
}

/* Bloc Tableau */
.wp-block-table.3is-table {
  margin: var(--spacing-6) 0;
  overflow-x: auto;
}

.wp-block-table.3is-table table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.wp-block-table.3is-table th,
.wp-block-table.3is-table td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--3is-gray-200);
}

.wp-block-table.3is-table th {
  background-color: var(--3is-gray-50);
  font-weight: var(--font-weight-semibold);
  color: var(--3is-gray-900);
}

.wp-block-table.3is-table td {
  color: var(--3is-gray-700);
}

.wp-block-table.3is-table tbody tr:hover {
  background-color: var(--3is-gray-50);
}

/* Bloc Séparateur */
.wp-block-separator.3is-separator {
  margin: var(--spacing-8) 0;
  border: none;
  height: 2px;
  background-color: var(--3is-gray-200);
}

.wp-block-separator.3is-separator.is-style-wide {
  width: 100%;
}

.wp-block-separator.3is-separator.is-style-dots {
  background: none;
  text-align: center;
}

.wp-block-separator.3is-separator.is-style-dots::before {
  content: "···";
  color: var(--3is-gray-400);
  font-size: var(--font-size-2xl);
  letter-spacing: var(--spacing-4);
}

/* Bloc Espaceur */
.wp-block-spacer.3is-spacer {
  margin: 0;
}

/* Bloc Espacement Gutenberg - Styles pour le front-end */
.wp-block-spacer {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Support pour les hauteurs personnalisées via style inline */
.wp-block-spacer[style*="height"] {
  height: var(--wp--custom--spacing--height, 100px) !important;
}

/* Forcer l'affichage des blocs d'espacement avec hauteur */
.wp-block-spacer[style*="height"] {
  display: block !important;
  visibility: visible !important;
}

/* Support pour les classes de hauteur prédéfinies */
.wp-block-spacer.has-small-height {
  height: var(--spacing-2) !important;
}

.wp-block-spacer.has-medium-height {
  height: var(--spacing-4) !important;
}

.wp-block-spacer.has-large-height {
  height: var(--spacing-8) !important;
}

.wp-block-spacer.has-x-large-height {
  height: var(--spacing-12) !important;
}

.wp-block-spacer.has-xx-large-height {
  height: var(--spacing-16) !important;
}

/* Support pour les hauteurs spécifiques en pixels */
.wp-block-spacer[style*="height: 50px"] {
  height: 50px !important;
}

.wp-block-spacer[style*="height: 100px"] {
  height: 100px !important;
}

.wp-block-spacer[style*="height: 150px"] {
  height: 150px !important;
}

.wp-block-spacer[style*="height: 200px"] {
  height: 200px !important;
}

.wp-block-spacer[style*="height: 250px"] {
  height: 250px !important;
}

.wp-block-spacer[style*="height: 300px"] {
  height: 300px !important;
}

/* Classes d'espacement Gutenberg */
.has-small-spacing {
  --wp--preset--spacing--small: var(--spacing-2);
}

.has-medium-spacing {
  --wp--preset--spacing--medium: var(--spacing-4);
}

.has-large-spacing {
  --wp--preset--spacing--large: var(--spacing-8);
}

.has-x-large-spacing {
  --wp--preset--spacing--x-large: var(--spacing-12);
}

.has-xx-large-spacing {
  --wp--preset--spacing--xx-large: var(--spacing-16);
}

/* Marges et paddings pour les blocs avec espacement Gutenberg */
.wp-block.has-small-spacing {
  margin-top: var(--wp--preset--spacing--small, var(--spacing-2));
  margin-bottom: var(--wp--preset--spacing--small, var(--spacing-2));
}

.wp-block.has-medium-spacing {
  margin-top: var(--wp--preset--spacing--medium, var(--spacing-4));
  margin-bottom: var(--wp--preset--spacing--medium, var(--spacing-4));
}

.wp-block.has-large-spacing {
  margin-top: var(--wp--preset--spacing--large, var(--spacing-8));
  margin-bottom: var(--wp--preset--spacing--large, var(--spacing-8));
}

.wp-block.has-x-large-spacing {
  margin-top: var(--wp--preset--spacing--x-large, var(--spacing-12));
  margin-bottom: var(--wp--preset--spacing--x-large, var(--spacing-12));
}

.wp-block.has-xx-large-spacing {
  margin-top: var(--wp--preset--spacing--xx-large, var(--spacing-16));
  margin-bottom: var(--wp--preset--spacing--xx-large, var(--spacing-16));
}

/* Paddings pour les blocs avec espacement interne */
.wp-block.has-small-spacing.has-background {
  padding-top: var(--wp--preset--spacing--small, var(--spacing-2));
  padding-bottom: var(--wp--preset--spacing--small, var(--spacing-2));
}

.wp-block.has-medium-spacing.has-background {
  padding-top: var(--wp--preset--spacing--medium, var(--spacing-4));
  padding-bottom: var(--wp--preset--spacing--medium, var(--spacing-4));
}

.wp-block.has-large-spacing.has-background {
  padding-top: var(--wp--preset--spacing--large, var(--spacing-8));
  padding-bottom: var(--wp--preset--spacing--large, var(--spacing-8));
}

.wp-block.has-x-large-spacing.has-background {
  padding-top: var(--wp--preset--spacing--x-large, var(--spacing-12));
  padding-bottom: var(--wp--preset--spacing--x-large, var(--spacing-12));
}

.wp-block.has-xx-large-spacing.has-background {
  padding-top: var(--wp--preset--spacing--xx-large, var(--spacing-16));
  padding-bottom: var(--wp--preset--spacing--xx-large, var(--spacing-16));
}

/* Bloc Media et Texte */
.wp-block-media-text.3is-media-text {
  margin: var(--spacing-8) 0;
  gap: var(--spacing-8);
}

.wp-block-media-text.3is-media-text .wp-block-media-text__content {
  padding: var(--spacing-6);
}

.wp-block-media-text.3is-media-text .wp-block-media-text__media {
  margin: 0;
}

.wp-block-media-text.3is-media-text .wp-block-media-text__media img {
  border-radius: var(--radius-lg);
}

/* Bloc Couverture */
.wp-block-cover.3is-cover {
  margin: var(--spacing-8) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.wp-block-cover.3is-cover .wp-block-cover__inner-container {
  padding: var(--spacing-8);
}

/* Bloc Fichier */
.wp-block-file.3is-file {
  margin: var(--spacing-4) 0;
}

.wp-block-file.3is-file .wp-block-file__button {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-md);
  background-color: var(--universe-color);
  color: var(--3is-white);
  transition: var(--transition-colors);
}

.wp-block-file.3is-file .wp-block-file__button:hover {
  background-color: var(--3is-red);
  color: var(--3is-white);
  text-decoration: none;
}

/* Bloc Audio */
.wp-block-audio.3is-audio {
  margin: var(--spacing-6) 0;
}

.wp-block-audio.3is-audio audio {
  width: 100%;
  border-radius: var(--radius-md);
}

/* Bloc Vidéo */
.wp-block-video.3is-video {
  margin: var(--spacing-6) 0;
}

.wp-block-video.3is-video video {
  width: 100%;
  border-radius: var(--radius-lg);
}

/* Bloc Embed */
.wp-block-embed.3is-embed {
  margin: var(--spacing-6) 0;
}

.wp-block-embed.3is-embed iframe {
  border-radius: var(--radius-lg);
}

/* CTA Flotant */
.cta-floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-index-fixed);
  display: flex;
  padding: 10px 15px;
  align-items: center;
  border-radius: 8px;
  background: var(--3is-red);
  color: var(--3is-white);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-lg);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-all);
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}


.cta-floating:hover {
  color: var(--3is-white);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.cta-floating:focus {
  outline: 2px solid var(--3is-red);
  outline-offset: 2px;
}

/* Accordeon */
.wp-block-esab-accordion-child {
  border-color: var(--3is-gray-300)!important;
  border-top: none!important;
  border-right: none!important;
  border-left: none!important;
  opacity: 0.5;
}

.esab__head, .esab__body {
  background-color: transparent!important;
  border-color: transparent!important;
}

.wp-block-esab-accordion .esab__head .esab__heading_txt {
  display: block!important;
}

.esab__active_accordion {
  opacity: 1!important;
}

.esab__heading_tag {
  color: var(--3is-black)!important;
}

.esab__active_icon svg, .esab__active_icon svg path {
  fill: var(--3is-black)!important;
}

.esab__heading_tag {
  font-size: var(--font-size-2xl);
}

/* Responsive */
@media (max-width: 768px) {
  .wp-block-columns.3is-columns {
    gap: var(--spacing-4);
  }
  
  .wp-block-media-text.3is-media-text {
    gap: var(--spacing-4);
  }
  
  .wp-block-media-text.3is-media-text .wp-block-media-text__content {
    padding: var(--spacing-4);
  }
  
  .wp-block-cover.3is-cover .wp-block-cover__inner-container {
    padding: var(--spacing-4);
  }
  
  .wp-block-heading.3is-heading h1 {
    font-size: var(--font-size-3xl);
  }
  
  .wp-block-heading.3is-heading h2 {
    font-size: var(--font-size-2xl);
  }
  
  .wp-block-heading.3is-heading h3 {
    font-size: var(--font-size-xl);
  }
  
  /* CTA Flotant - Masqué par défaut sur mobile */
  .cta-floating {
    display: none !important;
  }
  
  /* CTA Mobile - Bande fixe pleine largeur */
  .cta-floating.mobile-cta-visible {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    padding: 0 var(--spacing-4);
    border-radius: 4px 4px 0 0;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    z-index: var(--z-index-fixed);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    animation: slideUpMobileCTA 0.3s ease-out;
  }
  
  .cta-floating.mobile-cta-visible .cta-floating-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
  }
  
  /* Animation d'apparition */
  @keyframes slideUpMobileCTA {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}