/* barre-cle.css — barre sticky « le point clé », neuf (15/09/2026, BRIEF-comprendre-v3-1509.md, item 3).
   Affichée sous le header sur la home ET /comprendre (inc/entete.php, classe .rlk-cle) : REMPLACE .bande sur ces
   deux pages (.bande garde son CSS dans outil.css, hors périmètre — juste désactivée pour ces deux pages en PHP).
   Fichier séparé d'assets/outil.css (hors périmètre, interdiction d'y toucher). Chargé partout via inc/entete.php
   (poids négligeable sur les pages où .rlk-cle n'est pas rendue).
   .lan-sticky (outil.css) n'est JAMAIS réellement sticky en pratique : display:none ≥941px (remplacée par .bar-lan
   dans le header), position:static ≤940px (défile normalement). Le seul empilement sticky réel est donc :
   header (.bar, 76px) + cette barre + (sur mobile) la bande de pastilles .cq-mobnav de comprendre.css. */
.rlk-cle{position:sticky;top:76px;z-index:44;background:linear-gradient(90deg,#14204a,#0f1a3d 55%,#1b1f3f);border-bottom:1px solid rgba(255,197,61,.3);box-shadow:0 10px 26px -18px rgba(0,0,0,.8)}
.rlk-cle-in{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
.rlk-cle-ico{flex:0 0 auto;font-size:17px;font-style:normal}
.rlk-cle-txt{flex:1 1 auto;min-width:0;margin:0;font:600 14px/1.4 var(--b);color:var(--on-navy,#F2F5FA)}
.rlk-cle-txt strong{color:var(--sun)}
.rlk-cle-court{display:none}
.rlk-cle-btn{flex:0 0 auto;white-space:nowrap;padding:9px 14px;font-size:13px}
body.has-rail .rlk-cle{margin-left:0}

@media(max-width:940px){
  /* 21/09 Mathias (mobile /comprendre : « les éléments se montent dessus ») : sur mobile la barre ne colle plus —
     la bande de pastilles (.cq-mobnav, qui contient déjà « Le point clé ») reste seule sous le header. */
  .rlk-cle{position:static;box-shadow:none}
  .rlk-cle-in{padding-top:8px;padding-bottom:8px;gap:8px}
  .rlk-cle-ico{display:none}
  .rlk-cle-txt{font-size:12.5px;line-height:1.3}
  .rlk-cle-long{display:none}
  .rlk-cle-court{display:inline}
  .rlk-cle-btn{padding:7px 10px;font-size:11.5px}
}
@media(max-width:520px){
  .rlk-cle-in{flex-wrap:nowrap}
  .rlk-cle-txt{white-space:normal}
}
/* paysage très bas (ex. 844×390, item 5 du brief) : on condense — la barre repasse en flux normal (plus sticky)
   pour libérer de la hauteur d'écran, exactement comme .cq-mobnav (assets/comprendre.css) juste en dessous. */
@media(max-width:940px) and (max-height:430px){
  .rlk-cle{position:static;box-shadow:none}
}