/* Menu mobile des pages rubrique (sprint du 14/10/2026). Sous 720 px (même rupture que .kf-retour, fonts.css),
   le bouton menu prend la place de la croix « Retourner à l'accueil » ; au-dessus, rien ne change.
   Le bloc HTML est écrit dans chaque page, dans l'<article> : servi seul et injecté par overlay.js, il est identique.
   Comportement : js/menu-mobile.js. :not(#a):not(#b) : même poids que .kf-retour, pour l'emporter sur les
   règles des rubriques (p, ul, li, a de legal.css, solutions.css…). */

.kf-menu { display: none; }

@media (max-width: 720px) {
  .kf-retour:not(#a):not(#b) { display: none; }
  .kf-menu { display: block; }

  /* Même place que la croix : mêmes variables, mêmes valeurs par défaut. */
  .kf-menu-btn:not(#a):not(#b),
  .kf-menu-fermer:not(#a):not(#b) {
    position: fixed;
    top: var(--kf-retour-top, 16px);
    right: var(--kf-retour-right, 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #121318;
    border: 1px solid #2A2D35;
    border-radius: 0;
    color: #EDEBE6;
    cursor: pointer;
    font: inherit;
  }
  .kf-menu-btn:not(#a):not(#b) { z-index: var(--kf-retour-z, 10); }
  .kf-menu-fermer:not(#a):not(#b) { z-index: 1; }
  .kf-menu-btn:not(#a):not(#b):hover,
  .kf-menu-fermer:not(#a):not(#b):hover { border-color: #EDEBE6; }
  .kf-menu-btn:not(#a):not(#b):focus-visible,
  .kf-menu-fermer:not(#a):not(#b):focus-visible { outline: 2px solid #31c7d2; outline-offset: 2px; }
  .kf-menu-i { display: block; flex: 0 0 auto; }
  .kf-menu-t {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  .kf-menu-panneau:not(#a):not(#b) {
    position: fixed;
    inset: 0;
    z-index: 990;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 76px 16px 24px;
    background: #0A0A0D;
    color: #EDEBE6;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .18s ease-out, transform .18s ease-out;
  }
  .kf-menu-panneau:not(#a):not(#b)[hidden] { display: none; }
  .kf-menu-panneau:not(#a):not(#b).is-ouvert { opacity: 1; transform: none; }

  .kf-menu-sur:not(#a):not(#b) {
    position: absolute;
    top: 30px;
    left: 16px;
    margin: 0;
    font-family: 'Chakra Petch', system-ui, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9A9890;
  }

  .kf-menu-liste:not(#a):not(#b) { margin: 0; padding: 0; list-style: none; border-top: 1px solid #2A2D35; }
  .kf-menu-liste:not(#a):not(#b) > li { margin: 0; padding: 0; border-bottom: 1px solid #2A2D35; }
  .kf-menu-lien:not(#a):not(#b) {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 12px 0 20px;
    box-sizing: border-box;
    font-family: 'Chakra Petch', system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    color: #EDEBE6;
    text-decoration: none;
    background: transparent;
    border: 0;
  }
  .kf-menu-lien:not(#a):not(#b):hover { background: #121318; color: #EDEBE6; }
  .kf-menu-lien:not(#a):not(#b):focus-visible { outline: 2px solid #31c7d2; outline-offset: -2px; }
  /* Page courante : aplat Acier et barre cyan, le texte reste clair. */
  .kf-menu-lien:not(#a):not(#b)[aria-current="page"] { background: #121318; }
  .kf-menu-lien[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: #31c7d2;
  }

  /* Fiche du portfolio ouverte : sa croix (.pf-x) remplace celle de la page (portfolio.css), le menu aussi. */
  #portfolio:has(details.pf-fiche[open]) > .kf-menu,
  #portfolio.pf-has-fiche > .kf-menu { display: none; }
}

/* Défilement de la page bloqué pendant l'ouverture (classe posée par js/menu-mobile.js). */
.kf-menu-fige:not(#a):not(#b) { overflow: hidden; }

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .kf-menu-panneau:not(#a):not(#b) { transition: none; transform: none; }
}