/* === Global responsive overrides === */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
:where(h1,h2,h3,h4,h5,h6,p,li,a,figcaption){ overflow-wrap: break-word; word-break: normal; hyphens: auto; }
html, body { max-width: 100%; overflow-x: hidden; }

/* Common grid containers → wrap and/or 1 col on mobile */
@media (max-width: 1024px){
  .grid, [class*="grid-"], [class*="-grid"], .cards, .card-grid, .tiles, .columns,
  .row, .rows, [class*="cols"], .two-col, .three-col, .four-col, .gallery, .kpis, .grid4 {
    gap: 16px !important;
  }
}
@media (max-width: 900px){
  .grid, [class*="grid-"], [class*="-grid"], .cards, .card-grid, .tiles, .columns,
  [class*="cols"], .two-col, .three-col, .four-col, .gallery, .kpis, .grid4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .row, .rows, .flex, .toolbar, .nav, nav ul, .menu, .menu-items {
    display: flex !important; flex-wrap: wrap !important; gap: 16px !important;
  }
}
/* Footer cards */
.footer .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px){
  .footer .grid4 { grid-template-columns: 1fr; gap: 12px; }
  .footer .card a { white-space: normal; }
}

/* KPI badges in home */
@media (max-width: 600px){
  .kpis { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .nav a.pill { flex: 1 1 calc(50% - 8px); text-align: center; }
}
@media (max-width: 420px){
  .kpis { grid-template-columns: 1fr !important; }
  .pill { padding: 8px 12px; } .cta { padding: 10px 14px; }
  h1 { font-size: 22px; line-height: 1.22; }
}
/* Tables: scroll instead of breaking */
.table-responsive, .table-wrap { overflow-x: auto; }
@media (max-width: 900px){
  table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}


/* === v5 responsive hardening === */

/* Viewport helpers */
.wrap, .container, main, .section { box-sizing: border-box; }

/* Safer wrappers */
.wrap { max-width: 1120px; margin-inline: auto; padding-left: 16px; padding-right: 16px; }

/* Ensure nav wraps nicely */
.nav { display: flex; flex-wrap: wrap; gap: 10px; }

/* Pills fill rows on small screens */
@media (max-width: 640px){
  .nav .pill { flex: 1 1 calc(50% - 10px); text-align: center; }
}

/* Two-column badges -> single column on very small */
@media (max-width: 560px){
  .kpis { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}
@media (max-width: 400px){
  .kpis { grid-template-columns: 1fr !important; }
}

/* Force common multi-column layouts to 1 col on mobile */
@media (max-width: 900px){
  .grid, [class*="grid-"], [class*="-grid"], .cards, .card-grid, .tiles, .columns,
  [class*="cols"], .two-col, .three-col, .four-col, .gallery, .kpis, .grid4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .row, .rows, .flex, .toolbar { display:flex !important; flex-wrap:wrap !important; gap: 12px !important; }
}

/* Footer: never squeeze text */
.footer .grid4 > * { min-width: 0; }
.footer .card, .footer .card a { white-space: normal; overflow-wrap: break-word; }

/* Typography scaling */
@media (max-width: 540px){
  h1 { font-size: 22px; line-height: 1.25; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
  .pill { padding: 8px 12px; }
  .cta { padding: 10px 14px; }
}

/* No horizontal scrollbars */
html, body { max-width:100%; overflow-x:hidden; }
img, video, iframe { max-width:100%; height:auto; display:block; }


/* v6: footer resources removed; ensure grid4 stacks and cards don't stretch */
@media (max-width: 900px){
  .footer .grid4 { display:grid !important; grid-template-columns:1fr !important; gap:12px !important; }
  .footer .card { margin:0 !important; }
}
/* tighten hero & sections on very small devices */
@media (max-width: 360px){
  .section { padding-left: 12px; padding-right: 12px; }
  .pill { padding: 7px 10px; }
  .cta { padding: 9px 12px; }
}


/* ==== FINAL responsive bundle (per spec) ==== */

/* A. Navigation pills wrap in 2 cols <= 375px, CTA below menu */
@media (max-width: 768px){
  header .nav, .nav { display:flex; flex-wrap:wrap; gap:12px; }
}
@media (max-width: 375px){
  header .nav .pill, .nav .pill { flex:1 1 calc(50% - 12px); text-align:center; }
  header .cta, .nav + .cta { display:block; width:100%; max-width:100%; margin-inline:0; }
}

/* B. KPI grid: 2 cols (600–361), 1 col <= 360 */
@media (max-width: 600px){
  .kpis { display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
}
@media (max-width: 360px){
  .kpis { grid-template-columns:1fr !important; }
}

/* C. Hero single column <= 768px, image under text */
@media (max-width: 768px){
  .hero { display:grid !important; grid-template-columns:1fr !important; gap:16px !important; }
  .hero .post-hero-img, .hero .hero-img, .hero figure { order:2; margin-top:8px; }
}

/* D. Footer: 1 column <= 900px, normal line-wrapping */
@media (max-width: 900px){
  .footer .grid4, .footer .grid3, .footer .cards { display:grid !important; grid-template-columns:1fr !important; gap:12px !important; }
  .footer .card, .footer .card a { white-space:normal; overflow-wrap:break-word; }
}

/* E. Wrapping / viewport */
:where(h1,h2,h3,h4,h5,h6,p,li,a){ overflow-wrap:break-word; word-break:normal; }

/* ===== HOTFIX MOBILE (mettre tout à la FIN de z_responsive.css) ===== */

/* A) Footer : 3 cartes en colonne, pas de texte vertical */
@media (max-width: 420px){
  .footer :is(.grid,.grid4,.grid3,.cards,.rows,.row,[class*="grid"],[class*="cols"]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .footer .card,
  .footer .card > a {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
  }
  .footer .card * {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
  }
  .footer { padding-left: 14px; padding-right: 14px; }
}
/* (option) cacher la carte “Ressources” si elle réapparaît */
.footer .card:has(a[href*="resources"]), 
.footer .card:has(a[href*="ressources"]) { display: none !important; }
/* fallback si :has() n’est pas supporté */
.footer a[href*="resources"], 
.footer a[href*="ressources"] { display: none !important; }

/* B) Header : pastilles sur 2 colonnes, CTA en dessous */
@media (max-width: 375px){
  header .nav { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
  header .nav .pill { flex: 1 1 calc(50% - 12px) !important; text-align: center; }
  header .cta, .nav + .cta {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
  }
}

/* C) KPI sous le CTA : 2 colonnes puis 1 */
@media (max-width: 600px){
  .kpis { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}
@media (max-width: 360px){
  .kpis { grid-template-columns: 1fr !important; }
}

/* D) Hero : une colonne, image sous le texte */
@media (max-width: 768px){
  .hero { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; }
  .hero .hero-img, .hero .post-hero-img, .hero figure { order: 2; margin-top: 8px; }
  .hero img { width: 100%; height: auto; display: block; }
}

/* E) Sécurité anti-scroll horizontal */
html, body { max-width: 100%; overflow-x: hidden; }
:where(h1,h2,h3,h4,h5,h6,p,li,a){ overflow-wrap: break-word; word-break: normal; }