/* ============================================================
   Croflows — styles PROPRES AU SITE (hors thème onyx)
   Chargé APRÈS onyx.css. Tout ce qui n'est pas dans le thème canonique :
   le toggle langue, le resserrage header mobile, les écrans du portfolio
   (en classes, jamais inline → éditabilité Pinegrow), les utilitaires de section.
   ============================================================ */

/* --- utilitaire a11y : titre de section masqué visuellement, lu par les lecteurs d'écran
   (donne une structure de titres complète sans altérer le design e-ink) --- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- toggle langue FR/EN (à côté du jour/nuit) --- */
.lang{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:9px 12px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.lang:hover{background:var(--ink);color:var(--paper)}

/* --- header resserré aux petites largeurs (le toggle langue en plus tenait pas à 320) --- */
@media(max-width:430px){
  .site-head .hg-in{padding:0 14px;gap:10px}
  .hg-r{gap:7px}
  .tog,.lang{padding:7px 8px;font-size:10px;letter-spacing:.04em}
  .hg-menu{padding:8px 11px;font-size:10.5px;gap:8px}
  .hg-brand,.nav-logo{font-size:16px;gap:8px}
  .hg-brand .dot{width:12px;height:12px}
}

/* --- écrans du portfolio = capture du site (en CLASSES : E3 éditabilité) --- */
.mon-shot .mon-simg.shot-horizon{background:url('projets/horizon.webp') center top/cover no-repeat}
.mon-shot .mon-simg.shot-ali{background:url('projets/ali.webp') center top/cover no-repeat}
.mon-shot .mon-simg.shot-acl{background:url('projets/acl.webp') center top/cover no-repeat}
.mon-shot .mon-simg.shot-esidem{background:url('projets/esidem.webp') center top/cover no-repeat}
.mon-shot .mon-simg.shot-exec{background:url('projets/exec.webp') center top/cover no-repeat}
.mon-shot .mon-simg.shot-mmi{background:url('projets/mmi.webp') center top/cover no-repeat}

/* --- écrans des ÉTUDES DE CAS (frames ecB/ecC — mêmes captures, en classes E3) --- */
.frame .simg.shot-horizon{background:url('projets/horizon.webp') center top/cover no-repeat}
.frame .simg.shot-horizon-methode{background:url('projets/horizon-methode.webp') center top/cover no-repeat}
.frame .simg.shot-horizon-cta{background:url('projets/horizon-cta.webp') center top/cover no-repeat}
.frame .simg.shot-ali{background:url('projets/ali.webp') center top/cover no-repeat}
.frame .simg.shot-ali-cycles{background:url('projets/ali-cycles.webp') center top/cover no-repeat}
.frame .simg.shot-ali-mosaique{background:url('projets/ali-mosaique.webp') center top/cover no-repeat}
.frame .simg.shot-acl{background:url('projets/acl.webp') center top/cover no-repeat}
.frame .simg.shot-acl-parcours{background:url('projets/acl-parcours.webp') center top/cover no-repeat}
.frame .simg.shot-acl-cta{background:url('projets/acl-cta.webp') center top/cover no-repeat}
.frame .simg.shot-esidem{background:url('projets/esidem.webp') center top/cover no-repeat}
.frame .simg.shot-esidem-atouts{background:url('projets/esidem-atouts.webp') center top/cover no-repeat}
.frame .simg.shot-esidem-cta{background:url('projets/esidem-cta.webp') center top/cover no-repeat}
.frame .simg.shot-exec{background:url('projets/exec.webp') center top/cover no-repeat}
.frame .simg.shot-exec-mappemonde{background:url('projets/exec-mappemonde.webp') center top/cover no-repeat}
.frame .simg.shot-exec-cta{background:url('projets/exec-cta.webp') center top/cover no-repeat}
.frame .simg.shot-mmi{background:url('projets/mmi.webp') center top/cover no-repeat}
.frame .simg.shot-mmi-assess{background:url('projets/mmi-assess.webp') center top/cover no-repeat}
.frame .simg.shot-mmi-cta{background:url('projets/mmi-cta.webp') center top/cover no-repeat}

/* --- utilitaires de section (remplacent les styles inline en dur) --- */
.blk--herotop{border-top:none;padding-top:24px}
.blk--herolight{border-top:none;padding-top:80px}
.blk--flush{padding:0;border-top:none}
.blk--footer{padding-bottom:70px}
.center-cta{text-align:center;padding-top:20px}
.m0{margin-top:0}
.ml8{margin-left:8px}

/* --- chrome de page (titres d'accueil / pages intérieures) --- */
.home-meth{max-width:60ch}
.home-meth h2{font-family:var(--clash);font-weight:600;font-size:clamp(28px,4vw,52px);line-height:1;letter-spacing:-.03em;margin:14px 0 18px}
.home-meth h2 em{font-style:italic;font-weight:600}
.phead h1{font-family:var(--clash);font-weight:700;font-size:clamp(42px,7vw,88px);line-height:.94;letter-spacing:-.045em;margin:14px 0 16px}
.phead h1 em{font-style:italic;font-weight:600}
.phead p{color:var(--ink-2);max-width:52ch;font-size:18px}