/* ═══════════════════════════════════════════════════════════════════════════
   BrickManagement — adaptation responsive (mobile / tablette / ordinateur)
   N'ajoute QUE de la mise en page adaptative. Aucune couleur, police ou style
   n'est modifié : on réorganise seulement selon la largeur d'écran.

   Le site d'origine utilise des styles « inline » (attribut style=""), qui ont
   priorité sur une feuille de style classique. Les surcharges ci-dessous ciblent
   donc ces motifs inline et emploient !important là où c'est nécessaire.

   Points de rupture :
     • Mobile   : ≤ 767px
     • Tablette : 768px – 1024px
     • Nav hamburger : ≤ 899px (téléphones + tablettes portrait)
     • Ordinateur : ≥ 1025px (nav en ligne dès 900px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sécurité anti-débordement horizontal (toutes largeurs) ───────────────── */
html, body { max-width: 100%; }
img, svg, video, iframe { max-width: 100%; }


/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION — menu hamburger
   Bureau (par défaut) : le menu est « transparent » (display:contents), donc
   liens + bouton restent exactement en ligne comme dans le design d'origine.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-toggle { display: none; }
.nav-menu   { display: contents; }

/* Le bouton hamburger (3 traits) */
.nav-toggle {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-strong);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* La barre est enveloppée dans un <div> issu de l'export, qui limitait le
   position:sticky à la hauteur de la barre (elle défilait donc hors écran).
   On rend ce wrapper transparent pour que la barre colle vraiment en haut. */
div:has(> .site-nav) { display: contents; }

/* ── En-tête condensé au défilement ───────────────────────────────────────
   La barre (logo + menu) reste collée en haut (position:sticky) et se réduit
   légèrement quand on descend. site.js ajoute la classe .is-scrolled. */
.site-nav { transition: box-shadow .25s ease; }
.site-nav__inner { transition: height .25s ease; }
.site-nav img { transition: height .25s ease; }
.site-nav .nav-links a { transition: height .25s ease, color .11s ease !important; }
.site-nav.is-scrolled { box-shadow: 0 3px 14px rgba(20, 29, 56, .08); }
.site-nav.is-scrolled .site-nav__inner { height: 56px !important; }
.site-nav.is-scrolled img { height: 24px !important; }
@media (min-width: 960px) {
  .site-nav.is-scrolled .nav-links a { height: 56px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav__inner, .site-nav img, .site-nav .nav-links a { transition: none !important; }
}

@media (max-width: 959px) {
  .nav-toggle { display: inline-flex; }
  .site-nav__inner { position: relative; }

  /* Le menu devient un panneau déroulant sous la barre */
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-overlay, 0 8px 28px -8px rgba(20, 29, 56, .22));
    padding: 12px 20px 20px;
  }
  .nav-menu.open { display: flex; }

  /* Liens empilés, pleine largeur, hauteur confortable au tap */
  .nav-links { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
  .nav-links a { height: 50px !important; padding: 0 8px !important; font-size: 16px !important; }
  /* Souligné d'onglet actif : on le repositionne à gauche */
  .nav-links a > span[style*="position: absolute"] { left: 8px !important; right: auto !important; width: 22px; bottom: 8px !important; }

  /* Bouton « Demander une démo » pleine largeur */
  .nav-cta { display: block !important; margin-top: 10px; }
  .nav-cta .bmg-btn { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   TABLETTE — 768px à 1024px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Marges latérales un peu réduites */
  [style*="max-width: 1180px"] { padding-left: 28px !important; padding-right: 28px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — ≤ 767px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Marges latérales cohérentes, contenu en pleine largeur */
  [style*="max-width: 1180px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* Tout élément flex peut rétrécir : supprime les min-width qui débordent */
  [style*="min-width:"] { min-width: 0 !important; }

  /* Grilles auto-fit / auto-fill → une seule colonne lisible */
  [style*="grid-template-columns: repeat(auto-f"] { grid-template-columns: 1fr !important; }

  /* SectionBar : réduire la taille des grands titres sur mobile — plus
     confortable à lire ET évite qu'un long mot (« BrickManagement ») déborde
     à 320px. Les titres se replient alors proprement aux espaces, sans coupure. */
  .bmg-sectionbar__main { min-width: 0 !important; }
  .bmg-sectionbar--lg .bmg-sectionbar__title { font-size: 27px !important; }
  .bmg-sectionbar--md .bmg-sectionbar__title { font-size: 22px !important; }

  /* Liens longs (e-mail, URL) : autorisés à se couper pour ne pas déborder */
  a[href^="mailto"], a[href^="http"] { overflow-wrap: anywhere; }

  /* Réduire les très grands espacements verticaux de section */
  [style*="padding: 80px 32px"]     { padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding: 72px 0px 64px"] { padding-top: 44px !important; padding-bottom: 40px !important; }
  [style*="padding: 64px 32px 32px"]{ padding-top: 44px !important; }

  /* Cartes : padding intérieur un peu réduit pour gagner de la largeur utile */
  [style*="padding: 32px"] { padding: 22px !important; }

  /* ── Diagramme « socle + briques » (Accueil) : version compacte ──────────
     Sur mobile, le « mur » de 25 briques était très long. On le densifie en
     une grille régulière de 3 petites briques par ligne (plus léger, toujours
     dans le même style). Uniquement sur l'accueil (#bmSocleDiag). */
  #bmSocleDiag { padding: 16px !important; }
  #bmSocleDiag .bm-row { flex-wrap: wrap !important; gap: 6px !important; margin-top: 6px !important; }
  #bmSocleDiag .bm-brick {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 7px 4px !important;
    gap: 3px !important;
  }
  #bmSocleDiag .bm-brick svg { width: 15px !important; height: 15px !important; }
  #bmSocleDiag .bm-brick span { font-size: 9.5px !important; line-height: 1.12 !important; }

  /* Padding réduit des cartes de l'accueil (utile en 1 comme en 2 colonnes) */
  .page-accueil [style*="minmax(240px, 1fr)); gap: 20px"] > div,
  .page-accueil [style*="minmax(240px, 1fr)); gap: 16px"] > div {
    padding: 16px !important;
    gap: 10px !important;
  }

  /* ── Mur de prix (Tarifs) : idem, éviter les colonnes trop serrées ─────── */
  #bmWall .bm-tile { min-width: 0 !important; }

  /* Le tiroir de détail des briques prend tout l'écran */
  .bm-drawer .bm-panel { width: 100% !important; }
}


/* Cartes de l'accueil en 2 colonnes — seulement à partir de 360px de large
   (en dessous, elles restent en 1 colonne pour ne pas déborder). */
@media (min-width: 360px) and (max-width: 767px) {
  .page-accueil [style*="minmax(240px, 1fr)); gap: 20px"],
  .page-accueil [style*="minmax(240px, 1fr)); gap: 16px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}

/* Très petits écrans (≤ 380px) : marges encore réduites */
@media (max-width: 380px) {
  [style*="max-width: 1180px"] { padding-left: 16px !important; padding-right: 16px !important; }
}