/* ═══════════════════════════════════════════════════════════════
   KIPIK — EN-TÊTE : boutons Connexion / S'abonner / Télécharger et menu

   Chargé APRÈS style.css et pages.css. Complète l'en-tête sans toucher
   à style.css (servi avec un cache d'un an, « immutable » : une
   modification de style.css n'atteindrait pas les visiteurs qui l'ont déjà).
   Version dans l'URL : /assets/chrome.css?v=1 — changer v à chaque modification.

   Pourquoi : la barre d'origine débordait déjà sous ~1300 px (le bouton
   Télécharger était rogné) et sur téléphone ; avec S'abonner en plus, elle
   n'aurait plus tenu nulle part. Règles :
     ≥ 1320 px : cinq liens, langue, thème, Connexion, S'abonner, Télécharger
     1180-1319 : cinq liens, langue, thème, S'abonner ; Connexion et
                 Télécharger passent dans le menu
     < 1180 px : langue, thème, S'abonner ; liens, Connexion et Télécharger
                 dans le menu
     ≤ 640 px  : langue et thème réduits à une pastille chacun
   S'abonner reste visible à toutes les largeurs.

   COPIE PRÉFIXÉE `.kp` pour les pages applicatives : src/styles/site-chrome.css.
   Les deux doivent être modifiés ensemble.
   ═══════════════════════════════════════════════════════════════ */

/* Menu */
.mm{display:none;position:relative}
.mm summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
 border:1px solid var(--line);background:var(--surface);color:var(--text)}
.mm summary::-webkit-details-marker{display:none}
.mm summary::marker{content:''}
.mm summary .x{display:none}
.mm[open] summary .b{display:none}
.mm[open] summary .x{display:block}
.mm .mmp{position:absolute;right:0;top:calc(100% + 16px);width:min(300px,calc(100vw - 2 * var(--gut)));
 background:var(--bg);border:1px solid var(--line);box-shadow:0 18px 44px var(--shade);padding:8px;z-index:7100}
.mm .mmp a{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;text-decoration:none;color:var(--text);
 font-weight:700;font-size:15px}
.mm .mmp a:hover{background:var(--surface2)}
.mm .mmp .sep{height:1px;background:var(--line);margin:6px 8px}

/* Bascules : pastilles sans texte à toutes les largeurs (la place manque) */
header.bar .tsw button span,header.bar .langs .cd{display:none}
header.bar .langs a{padding:6px}
header.bar .brandlink small{display:none}

/* Moins de 1180 px : liens, Connexion, Télécharger dans le menu */
@media(max-width:1179px){
 header.bar .navlinks{display:none}
 header.bar .login,header.bar .dl{display:none}
 header.bar .mm{display:block}
 header.bar .brandlink small{display:block}
}
@media(max-width:699px){header.bar .brandlink small{display:none}}
/* 1180 à 1319 px : les liens sont dans la barre, pas dans le menu */
@media(min-width:1180px){
 header.bar .navlinks{display:flex;gap:16px;margin-left:16px}
 header.bar .login,header.bar .dl{display:none}
 header.bar .mm{display:block}
 .mm .mmn{display:none}
}
@media(min-width:1320px){
 header.bar .login,header.bar .dl{display:inline-flex}
 header.bar .mm{display:none}
}

/* Téléphone : une seule pastille par bascule (celle vers laquelle on bascule) */
@media(max-width:640px){
 header.bar .wrap{gap:6px}
 header.bar .headright{gap:5px}
 header.bar .plaque{padding:6px 8px}
 header.bar .langs{margin-right:0;padding:2px}
 header.bar .langs a[aria-current]{display:none}
 header.bar .tsw{padding:2px}
 header.bar .tsw button[aria-pressed="true"]{display:none}
 header.bar .tsw button{min-width:40px;min-height:40px}
 header.bar .btn-sm{padding:9px 12px}
 .mm summary{width:42px;height:42px}
}
@media(max-width:400px){
 header.bar .wrap{padding-left:max(12px,var(--sal));padding-right:max(12px,var(--sar))}
}
@media print{.mm{display:none}}