/* ============================================================
   KOMEX — RESPONSIVE
   Chargé APRÈS komex.css. Cible les classes de blocs Gutenberg
   (stables) pour un rendu propre sur mobile (<=767px) et
   tablette (768-1024px). N'agit qu'en media queries : le desktop
   reste piloté par komex.css.
   Breakpoints :
     - mobile   : max-width 767px
     - tablette : 768px - 1024px
   Rappel : WP empile nativement .wp-block-columns sous 782px
   (sauf .is-not-stacked-on-mobile) — on renforce la cohérence.
   ============================================================ */

/* ------------------------------------------------------------
   0. Anti-scroll horizontal global (toutes tailles <= 1024px)
   ------------------------------------------------------------ */
/* Anti-scroll horizontal. overflow-x:clip coupe le X sans créer de
   conteneur de scroll. Surcharge le `body{overflow-x:hidden}` de komex.css. */
html,
body {
  overflow-x: clip;
  max-width: 100vw;
}

/* HEADER FIXE (comportement de la maquette : lg:fixed, overlay du hero).
   position:fixed est robuste quel que soit l'overflow des ancêtres,
   contrairement à sticky. Surcharge le position:sticky de komex.css. */
header.komex-header,
.komex-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
}

@media (max-width: 1024px) {
  html,
  body {
    overflow-x: clip;
    max-width: 100vw;
  }

  /* Les conteneurs racine ne débordent jamais latéralement.
     clip laisse le sticky/overflow-y intacts tout en coupant le X. */
  .wp-site-blocks,
  .wp-site-blocks > main,
  .wp-block-post-content,
  .entry-content {
    overflow-x: clip;
    max-width: 100%;
  }

  /* Les blocs pleine largeur restent dans le viewport */
  .alignfull,
  .wp-block-cover.alignfull,
  .wp-block-group.alignfull {
    max-width: 100vw;
    overflow-x: clip;
  }

  /* Images de contenu fluides */
  .wp-block-image img,
  figure.wp-block-image img,
  .wp-block-media-text__media img {
    max-width: 100%;
    height: auto;
  }

  /* Bandeaux marquee : jamais de débordement de page
     (le défilement CSS reste interne au conteneur) */
  .wp-block-group.has-primary-background-color,
  .komex-marquee,
  [class*="marquee"] {
    overflow-x: hidden;
  }
}

/* ============================================================
   TABLETTE — 768px à 1024px
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Rythme vertical : on réduit les paddings de section les
     plus généreux (presets d'espacement WP) */
  :root {
    --wp--preset--spacing--80: 4rem;   /* 6rem -> 4rem  */
    --wp--preset--spacing--70: 3rem;   /* 4rem -> 3rem  */
  }

  /* Heros : hauteur maîtrisée */
  .wp-block-cover {
    min-height: clamp(420px, 60vh, 620px) !important;
    padding-left: clamp(24px, 5vw, 48px) !important;
    padding-right: clamp(24px, 5vw, 48px) !important;
  }

  /* Titres fluides pour éviter tout débordement */
  .has-huge-font-size {
    font-size: clamp(3rem, 7.5vw, 4.25rem) !important;
    line-height: 0.98;
  }
  .has-xx-large-font-size {
    font-size: clamp(2rem, 5vw, 2.6rem) !important;
  }
  .has-x-large-font-size {
    font-size: clamp(1.5rem, 3.4vw, 1.75rem) !important;
  }
}

/* Grilles de cartes / colonnes -> 2 par ligne en tablette.
   On s'aligne sur le seuil WP (782px) pour éviter le conflit
   avec l'empilement natif à 768-781px. */
@media (min-width: 782px) and (max-width: 1024px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: calc(50% - 12px) !important;
    min-width: 0; /* autorise le shrink, évite le débordement */
  }
}

/* ============================================================
   MOBILE — max-width 767px
   ============================================================ */
@media (max-width: 767px) {
  /* --- Rythme vertical : paddings de section réduits --- */
  :root {
    --wp--preset--spacing--80: 3rem;   /* 6rem -> 3rem   */
    --wp--preset--spacing--70: 2.25rem;/* 4rem -> 2.25rem*/
    --wp--preset--spacing--60: 1.75rem;/* 3rem -> 1.75rem*/
  }

  /* --- Colonnes : pile verticale, pleine largeur, gap cohérent --- */
  .wp-block-columns {
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }
  /* Colonnes explicitement "non empilées" : 2 côte à côte propres */
  .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
    min-width: 0;
  }

  /* --- Heros / covers : hauteur réduite, contenu respirable --- */
  .wp-block-cover {
    min-height: clamp(360px, 56vh, 480px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .wp-block-cover__inner-container {
    width: 100%;
    max-width: 100%;
  }

  /* --- Typographie fluide (évite le clipping horizontal des
        gros titres à mot long type "CHALLENGE HYBRIDE") --- */
  .has-huge-font-size {
    font-size: clamp(2.1rem, 9.5vw, 3rem) !important;
    line-height: 0.98 !important;
  }
  .has-xx-large-font-size {
    font-size: clamp(1.7rem, 7.5vw, 2.25rem) !important;
    line-height: 1.05 !important;
  }
  .has-x-large-font-size {
    font-size: clamp(1.35rem, 5.5vw, 1.6rem) !important;
    line-height: 1.1 !important;
  }
  .has-large-font-size {
    font-size: clamp(1.15rem, 4.5vw, 1.35rem) !important;
  }
  /* h1 générique (thème) au cas où sans preset */
  .wp-block-cover h1,
  .entry-content h1 {
    font-size: clamp(2.1rem, 9.5vw, 3rem);
    line-height: 0.98;
  }
  /* Empêche un mot plus large que l'écran de forcer un scroll */
  h1, h2, h3, .wp-block-heading {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* --- Corps de texte lisible --- */
  .entry-content p,
  .wp-block-post-content p,
  .wp-block-group p {
    font-size: 1rem;
    line-height: 1.6;
  }
  .has-small-font-size {
    font-size: 0.9rem !important;
  }

  /* --- Boutons de contenu : empilés, pleine largeur ---
     (on exclut le CTA du header, géré à part dans la barre) */
  .wp-block-buttons:not(.komex-header__cta) {
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100%;
  }
  .wp-block-buttons:not(.komex-header__cta) > .wp-block-button {
    flex: 1 1 100% !important;
    width: 100%;
  }
  .wp-block-buttons:not(.komex-header__cta) .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  /* Boutons centrés : on garde le centrage mais pleine largeur */
  .wp-block-buttons.is-content-justification-center:not(.komex-header__cta) {
    justify-content: stretch;
  }

  /* --- Cartes produits / features : 1 colonne, image contenue --- */
  .wp-block-group.has-carbon-background-color {
    padding: 1.25rem !important;
  }
  .wp-block-group.has-carbon-background-color .wp-block-image img {
    width: 100%;
  }

  /* --- Séparateurs / spacers surdimensionnés atténués --- */
  .wp-block-spacer {
    height: 2rem !important;
  }

  /* --- Media-text : empile média + texte --- */
  .wp-block-media-text {
    grid-template-columns: 1fr !important;
  }
  .wp-block-media-text__content {
    padding: 1.5rem 0 0 !important;
  }
}

/* ============================================================
   HERO ACCUEIL — bloc custom .komex-hero (style inline in-body).
   On surcharge en specificité >= (.komex-hero .xxx) pour battre
   le <style> embarque. Objectif : titre qui tient sur petits
   ecrans, hauteur et respiration maitrisees.
   ============================================================ */
@media (max-width: 767px) {
  .komex-hero {
    min-height: clamp(480px, 82vh, 680px) !important;
  }
  .komex-hero .komex-hero__inner {
    padding-top: clamp(4.5rem, 14vh, 7rem) !important;
    padding-bottom: clamp(2rem, 5vh, 3rem) !important;
    padding-left: clamp(1rem, 5vw, 1.5rem) !important;
    padding-right: clamp(1rem, 5vw, 1.5rem) !important;
  }
  /* Titre fluide : borne basse plus prudente pour 320-360px */
  .komex-hero .komex-hero__title {
    font-size: clamp(30px, 8.5vw, 56px) !important;
    line-height: 0.95 !important;
  }
  /* CTA : centres, empiles proprement, largeur confortable */
  .komex-hero .komex-hero__cta {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .komex-hero .komex-hero__btn {
    width: 100%;
    max-width: 340px;
    justify-content: center;
  }
}

/* ============================================================
   HEADER — barre compacte en mobile / tablette
   Le CTA "INSCRIPTION" reste sur une ligne (pas de flex 100%).
   ============================================================ */
@media (max-width: 1024px) {
  .komex-header__bar {
    gap: 0.75rem !important;
  }
  .komex-header__right {
    gap: 0.5rem !important;
  }
  /* CTA header : compact, jamais coupe en deux lignes */
  .komex-header__cta .wp-block-button__link {
    white-space: nowrap;
    padding: 0.6rem 1rem;
  }
}
@media (max-width: 480px) {
  .komex-header .wp-block-site-title {
    font-size: 1.05rem !important;
    line-height: 1.05;
  }
  .komex-header__cta .wp-block-button__link {
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 0.55rem 0.8rem;
  }
}

/* ============================================================
   NAVIGATION — menu burger FSE (wp-block-navigation)
   Overlay lisible sur fond sombre + items espacés.
   S'applique dès que l'overlay mobile est actif.
   ============================================================ */
@media (max-width: 1024px) {
  /* Icône burger bien visible (chrome) */
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    color: #e9eaee;
  }
  .wp-block-navigation__responsive-container-open svg,
  .wp-block-navigation__responsive-container-close svg {
    fill: currentColor;
    width: 28px;
    height: 28px;
  }

  /* Overlay plein écran, fond noir KOMEX opaque */
  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #08080a !important;
    padding: clamp(2rem, 8vw, 4rem) clamp(1.5rem, 6vw, 3rem) !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    width: 100%;
  }

  /* Items espacés, typographie lisible, alignés à gauche */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    gap: 0.35rem;
  }
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
    width: 100%;
  }
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    display: block;
    padding: 0.75rem 0;
    font-family: "Anton", "Helvetica Neue", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 1.5rem;
    color: #e9eaee;
    border-bottom: 1px solid #26282f;
  }
  /* Sous-menus : indentation légère, séparateur discret */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu
    .wp-block-navigation-item__content {
    font-size: 1.1rem;
    padding-left: 1rem;
    color: #9aa0aa;
    border-bottom-color: rgba(38, 40, 47, 0.6);
  }
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:hover {
    color: #c83a4c;
  }
  /* Bouton de fermeture (croix) bien positionné et visible */
  .wp-block-navigation__responsive-container-close {
    top: clamp(1rem, 4vw, 1.75rem);
    right: clamp(1rem, 4vw, 1.75rem);
  }
}