/* ===== Responsive — load AFTER page styles ===== */

html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;max-width:100vw}

img{max-width:100%;height:auto}
.bh-photo img,.hc-photo img{max-width:none;height:100%}

/* —— Navigation —— */
.mj-nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;margin-left:6px;padding:0;
  border:1px solid #e8e6e0;border-radius:6px;background:#fff;
  cursor:pointer;flex-shrink:0;
}
.mj-nav-toggle span{
  display:block;width:18px;height:2px;background:#1a1916;
  position:relative;transition:background .2s;
}
.mj-nav-toggle span::before,.mj-nav-toggle span::after{
  content:'';position:absolute;left:0;width:18px;height:2px;background:#1a1916;
  transition:transform .2s,top .2s;
}
.mj-nav-toggle span::before{top:-6px}
.mj-nav-toggle span::after{top:6px}
.mj-nav-toggle[aria-expanded="true"] span{background:transparent}
.mj-nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.mj-nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:900px){
  .mj-nav-wrap{width:100%;max-width:100vw}
  .mj-nav-bar{
    padding:0 14px;height:52px;gap:6px;
    max-width:100%;width:100%;box-sizing:border-box;
    min-width:0;
  }
  .mj-nav-logo{
    font-size:13px;flex:1 1 auto;min-width:0;
    margin-right:4px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;
    max-width:calc(100% - 52px);
  }
  .mj-nav-logo-sub{display:none}
  .mj-nav-toggle{display:flex}
  .mj-nav-items{
    display:none;position:fixed;top:52px;left:0;right:0;z-index:200;
    flex-direction:column;align-items:stretch;gap:0;
    padding:10px 16px 16px;background:#fff;
    border-bottom:1px solid #e8e6e0;
    box-shadow:0 10px 28px rgba(0,0,0,.1);
    max-height:calc(100dvh - 52px);overflow-y:auto;
  }
  .mj-nav-items.is-open{display:flex}
  .mj-nav-item{padding:12px 14px;font-size:14px}
  .mj-nav-bar>.mj-nav-cta{display:none}
  .mj-nav-items .mj-nav-cta-mobile{
    display:block;margin-top:10px;width:100%;text-align:center;
    padding:12px 18px;font-size:13px;font-weight:500;
    color:#fff;background:#040720;border-radius:6px;
    text-decoration:none;box-sizing:border-box;
  }
}

/* —— Tablet —— */
@media(max-width:1024px){
  .bio-hero{grid-template-columns:minmax(0,280px) 1fr;gap:32px;padding:48px 28px}
  .page-hero{gap:32px;padding:48px 28px 40px}
  .book-entry{grid-template-columns:200px 1fr}
  .be-content{padding:36px 0 36px 28px}
  .be-cover{padding:36px 24px 36px 0}
  footer{grid-template-columns:1fr 1fr;gap:24px;padding:32px 28px}
  .footer-bottom{padding:12px 28px}
  .bio-acts{grid-template-columns:1fr 1fr}
  .diff-row{grid-template-columns:1fr 1fr;gap:12px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .territory-grid{grid-template-columns:1fr 1fr}

  /* CORRECTION 1 — index.html : grilles sans breakpoint tablette
     .pillars passe de 4→2 colonnes et .books-grid de 3→2 colonnes
     pour éviter des colonnes trop étroites entre 769px et 1024px */
  .pillars{grid-template-columns:repeat(2,1fr)}
  .books-grid{grid-template-columns:repeat(2,1fr)}

  /* CORRECTION — np-grid (3 non-profits about.html) → 2 colonnes à tablette */
  .np-grid{grid-template-columns:1fr 1fr}
}

/* —— Mobile —— */
@media(max-width:768px){
  .bio-hero,
  .biography-section,
  .credentials-section,
  .nonprofits-section,
  .enquiry-section,
  .page-hero,
  .books-section,
  .research-section,
  .publications-section,
  .publisher-section,
  .credential-section,
  .domains-section,
  .history-section,
  .convo-section,
  .mahat-bridge,
  .featured-essay,
  .essays-section,
  .bridges,
  .subscribe-section,
  .filter-section,
  .page-hero>div{
    box-sizing:border-box;
    max-width:100%;
  }

  .bio-hero,
  .biography-section,
  .credentials-section,
  .nonprofits-section,
  .enquiry-section,
  .page-hero,
  .research-section,
  .publications-section,
  .publisher-section,
  .credential-section,
  .domains-section,
  .history-section,
  .convo-section,
  .mahat-bridge,
  .featured-essay,
  .essays-section,
  .bridges,
  .subscribe-section,
  .filter-section{
    padding:40px 20px!important;
  }

  .bio-hero,
  .page-hero{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }

  .bh-photo{max-width:min(100%,300px);margin:0 auto}

  .bh-right{min-width:0;max-width:100%;box-sizing:border-box;}
  .bh-name{
    font-size:clamp(1.4rem,6vw,1.9rem)!important;
    line-height:1.15!important;
    overflow-wrap:break-word;
    word-wrap:break-word;
  }
  .bh-titles{
    font-size:13px!important;
    overflow-wrap:break-word;
    word-wrap:break-word;
  }
  .bh-titles br{display:none}

  .ph-h1,
  .bio-h2,
  .cs-h2,
  .np-h2,
  .convo-h2,
  .ss-h2{
    font-size:clamp(1.5rem,6.5vw,2.15rem)!important;
    line-height:1.12!important;
    overflow-wrap:break-word;
    word-wrap:break-word;
    hyphens:auto;
  }
  .ph-h1 br{display:none}

  .ph-intro,.bio-full p,.cs-intro,.np-intro{
    font-size:14px;
    line-height:1.75;
    overflow-wrap:break-word;
  }

  /* General text overflow protection */
  h1,h2,h3,h4,p,li,span,a{
    overflow-wrap:break-word;
    word-wrap:break-word;
    min-width:0;
  }

  .press-kit{flex-direction:column;align-items:flex-start;gap:12px}

  .bio-acts,
  .cred-grid,
  .np-grid,
  .eq-grid,
  .phd-grid,
  .pub-grid,
  .domains-grid,
  .essays-grid,
  .bridges{
    grid-template-columns:1fr!important;
    gap:20px!important;
  }

  .books-section{padding:0!important}
  .book-entry{grid-template-columns:1fr!important}
  .be-cover{
    padding:24px 20px!important;
    border-right:none!important;
    border-bottom:1px solid #ddd8cc;
    max-width:260px;margin:0 auto;
  }
  .be-content{padding:24px 20px!important}

  .publisher-section,
  .convo-section,
  .subscribe-section{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }

  footer{
    grid-template-columns:1fr!important;
    gap:20px!important;
    padding:28px 20px 20px!important;
  }
  .footer-bottom{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:8px!important;
    padding:12px 20px!important;
  }

  .history-section{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .history-table{min-width:480px;font-size:12px}

  .ss-form{flex-direction:column}
  .ss-btn{width:100%}
  .filter-section{padding:14px 20px!important}
  .be-actions{flex-wrap:wrap}

  /* CORRECTION 2 — Supprimer text-align:justify sur mobile (about.html .bio-full p)
     justify produit des "rivières de blanc" sur les écrans étroits */
  .bio-full p{text-align:left!important}

  /* CORRECTION 3 — Tailles de police minimum pour les labels eyebrow/kicker
     Les valeurs .52rem (8.32px) et .5rem (8px) sont illisibles sur mobile.
     On impose un minimum de 11px pour tous ces éléments décoratifs. */
  .s-k,.h-k,.p-n,.aff-l,.cg-label,.s-kicker,
  .ph-label,.bio-label,.cs-label,.np-h2 .bio-label,
  .rs-label,.fe-flag,.filter-label,.ph-standard-label,
  .pk-label,.eq-label,.mb-label,.cr-label,.db-label,
  .be-year,.bk-type,.ec-category,.fe-category,
  .bc-label,.ss-label,.pub-type,.pc-type{
    font-size:11px!important;
  }

  /* CORRECTION 4 — Bouton "Download press kit" full-width dès 768px
     Le flex est déjà en colonne à ce breakpoint mais le bouton restait inline */
  .pk-download{
    width:100%;
    text-align:center;
    box-sizing:border-box;
    display:block;
  }

  /* CORRECTION — Amélioration des cibles tactiles pour liens inline importants
     WCAG recommande 44px minimum ; on ajoute du padding vertical */
  .et-cta,.convo-email,.bc-link,.mb-link{
    display:inline-block;
    padding-top:10px;
    padding-bottom:10px;
  }
}

@media(max-width:480px){
  .mj-nav-bar{padding:0 10px}
  .mj-nav-logo{font-size:12px}
  .ph-h1{font-size:clamp(1.35rem,7vw,1.75rem)!important}
  .pk-download,.be-actions .btn-book{width:100%;text-align:center;box-sizing:border-box}
  .be-actions{flex-direction:column}
  .cred-pill{font-size:10px}
  .stats{grid-template-columns:1fr!important}
  .diff-row{grid-template-columns:1fr!important}
  .territory-grid{grid-template-columns:1fr!important}
}

/* ===== index.html ===== */
@media(max-width:768px){
  .hero{
    padding:36px 20px 28px!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
    max-width:100%!important;
  }
  .hero-card{
    display:block!important;position:static!important;
    margin-top:0!important;
  }
  .hc-photo{height:min(52vw,260px)}
  h1{font-size:clamp(1.6rem,7vw,2.25rem)!important;line-height:1.1!important}
  .section{padding:36px 20px!important;max-width:100%!important}
  .full-section{padding:36px 20px!important}
  .pillars,.books-grid,.cred-grid,.eco-grid{
    grid-template-columns:1fr!important;
  }
  .h-links{flex-direction:column;gap:10px}
  .h-link-primary,.h-link-secondary{
    width:100%;text-align:center;box-sizing:border-box;
  }
  .cta{
    padding:32px 20px!important;
    grid-template-columns:1fr!important;
    gap:20px!important;
  }
  .cta-btn{display:block;text-align:center;width:100%;box-sizing:border-box}
  .footer{
    padding:18px 20px!important;
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  .f-r{flex-wrap:wrap;gap:10px}
}

/* ===== books.html ===== */
@media(max-width:768px){
  .be-title{font-size:clamp(1.1rem,5vw,1.4rem)!important;overflow-wrap:break-word;word-wrap:break-word}
  .rs-h2,.ps-h2{font-size:clamp(1.1rem,4.5vw,1.35rem)!important;overflow-wrap:break-word;word-wrap:break-word}
  .rs-intro{font-size:14px;overflow-wrap:break-word}
  .rp-item{box-sizing:border-box;max-width:100%}
}

/* ===== thinking.html ===== */
@media(max-width:768px){
  .fe-title{font-size:clamp(1.1rem,4.5vw,1.4rem)!important;overflow-wrap:break-word;word-wrap:break-word;line-height:1.35!important}
  .fe-title a{overflow-wrap:break-word;word-wrap:break-word}
  .mb-body{overflow-wrap:break-word}
}

/* ===== board.html ===== */
@media(max-width:768px){
  .distinction-box{box-sizing:border-box;max-width:100%}
  .ph-right{min-width:0;max-width:100%;box-sizing:border-box}
}

/* ===== speaking.html ===== */
@media(max-width:768px){
  .topbar{padding:12px 20px!important}
  .tb-links{display:none}
  .hero{padding:36px 20px 28px!important}
  .hero h1{font-size:clamp(1.5rem,6.5vw,2rem)!important;line-height:1.1!important}
  .section{padding:36px 20px!important}
  .diff-row,.territory-grid{grid-template-columns:1fr!important}
  .stats{grid-template-columns:repeat(2,1fr)!important}
  .cta{padding:32px 20px!important;grid-template-columns:1fr!important}
  .cta-btn{display:block;text-align:center;width:100%;box-sizing:border-box}
  .footer{padding:16px 20px!important;flex-direction:column;align-items:flex-start}
  .f-r{flex-wrap:wrap}
  .aeo-block{max-width:100%;box-sizing:border-box}
}