/* Le menu de code-en-ligne.fr : bandeau du haut, tiroir du téléphone, barre du bas en verre clair.
   Palette de la marque : navy #0F1830, jaune de signalisation #FFC629, blanc ; bleu d'action #1A56C9.
   Toutes les règles sont préfixées .cel- et durcies là où un gabarit peut les écraser. */

:root {
  --cel-navy: #0f1830;
  --cel-navy-2: #16223a;
  --cel-jaune: #ffc629;
  --cel-jaune-clair: #ffdc72;
  --cel-jaune-fonce: #f5b60e;
  --cel-ambre: #7a5200;
  --cel-bleu: #1a56c9;
  --cel-bleu-fonce: #123e8c;
  --cel-texte: #1b2333;
  --cel-gris: #5b6478;
  --cel-bord: #e1e6ef;
  --cel-fond: #f3f5f9;
  --cel-tete-h: 72px;
  --cel-police: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cel-titre: 'Archivo Black', 'Arial Black', sans-serif;
}

/* Une ancre (#…) ne se cache jamais sous le bandeau fixe. */
html { scroll-padding-top: calc(var(--cel-tete-h) + 16px); }

/* Le lien d'évitement : invisible tant qu'il n'a pas le focus clavier. */
.cel-evitement {
  position: absolute; left: 12px; top: -60px; z-index: 1000001;
  background: var(--cel-navy); color: #fff !important; padding: 10px 16px; border-radius: 10px;
  font: 700 15px/1.2 var(--cel-police); text-decoration: none !important;
}
.cel-evitement:focus { top: 12px; outline: 3px solid var(--cel-jaune); outline-offset: 2px; }

/* ─── Le bandeau ─── */
.cel-tete {
  position: sticky; top: 0; z-index: 1000000;
  /* fond plein, jamais de backdrop-filter ici : il ferait du bandeau le repère des éléments fixes,
     et le tiroir du téléphone (position: fixed) serait enfermé dans les 64 px du bandeau */
  background: #fff;
  box-shadow: 0 1px 0 var(--cel-bord), 0 6px 18px rgba(15, 24, 48, .05);
  font-family: var(--cel-police);
}
.admin-bar .cel-tete { top: 32px; }
@media (max-width: 782px) { .admin-bar .cel-tete { top: 46px; } }
@media (max-width: 600px) { .admin-bar .cel-tete { top: 0; } }
.cel-tete *, .cel-tete *::before, .cel-tete *::after { box-sizing: border-box; }
.cel-tete-in {
  max-width: 1240px; margin: 0 auto; height: var(--cel-tete-h);
  display: flex; align-items: center; gap: 24px; padding: 0 24px;
}

/* Le logo : le losange, « Code » en Archivo Black, « en ligne » en Plus Jakarta Sans. */
.cel-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none !important; flex: none; color: inherit; }
.cel-logo .cel-marque { display: block; flex: none; }
.cel-logo-mots { display: flex; flex-direction: column; line-height: .92; }
.cel-logo-1 { font-family: var(--cel-titre); font-weight: 400; font-size: 24px; letter-spacing: -.01em; color: var(--cel-navy); }
.cel-logo-2 { font-family: var(--cel-police); font-weight: 700; font-size: 15px; letter-spacing: .01em; margin-top: 2px; color: #3a4766; }
.cel-logo-sombre .cel-logo-1 { color: #fff; }
.cel-logo-sombre .cel-logo-2 { color: var(--cel-jaune); }
a.cel-logo:focus-visible { outline: 3px solid var(--cel-bleu); outline-offset: 4px; border-radius: 8px; }

/* Les quatre entrées */
.cel-nav { flex: 1; min-width: 0; }
.cel-nav ul { display: flex; gap: 4px; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.cel-nav li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.cel-nav li::before { content: none !important; }
.cel-nav a {
  display: block; position: relative; padding: 10px 14px; border-radius: 10px;
  color: var(--cel-navy) !important; text-decoration: none !important;
  font: 700 15.5px/1.2 var(--cel-police); white-space: nowrap;
  transition: background-color .15s;
}
.cel-nav a:hover { background: var(--cel-fond); }
.cel-nav a:focus-visible { outline: 3px solid var(--cel-bleu); outline-offset: 1px; }
.cel-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 4px; border-radius: 2px;
  background: var(--cel-jaune);
}

.cel-tete-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.cel-cnx {
  color: var(--cel-navy) !important; text-decoration: none !important;
  font: 700 15px/1.2 var(--cel-police); padding: 10px 12px; border-radius: 10px; white-space: nowrap;
}
.cel-cnx:hover { background: var(--cel-fond); }
.cel-cnx:focus-visible { outline: 3px solid var(--cel-bleu); outline-offset: 1px; }

/* Le bouton jaune de la marque : même dégradé que .po-btn du thème. */
.cel-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 0 22px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(135deg, var(--cel-jaune-clair), var(--cel-jaune) 55%, var(--cel-jaune-fonce));
  color: var(--cel-navy) !important; text-decoration: none !important;
  font: 800 15px/1 var(--cel-police);
  box-shadow: inset 0 -2px 0 rgba(122, 82, 0, .18), 0 6px 16px rgba(245, 182, 14, .26);
  transition: transform .15s, box-shadow .15s;
}
.cel-cta:hover { transform: translateY(-1px); box-shadow: inset 0 -2px 0 rgba(122, 82, 0, .18), 0 10px 22px rgba(245, 182, 14, .32); }
.cel-cta:focus-visible { outline: 3px solid var(--cel-navy); outline-offset: 3px; }
.cel-cta-large { width: 100%; min-height: 52px; font-size: 16px; }

/* ─── Le tiroir du téléphone (un <details>, sans script) ─── */
.cel-tiroir { display: none; position: relative; }
.cel-tiroir-btn {
  list-style: none; cursor: pointer; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: var(--cel-navy);
  background: var(--cel-fond); border: 1px solid var(--cel-bord);
}
.cel-tiroir-btn::-webkit-details-marker { display: none; }
.cel-tiroir-btn::marker { content: ""; }
.cel-tiroir-btn:focus-visible { outline: 3px solid var(--cel-bleu); outline-offset: 2px; }
.cel-tiroir .cel-ico-fermer { display: none; }
.cel-tiroir[open] .cel-ico-ouvrir { display: none; }
.cel-tiroir[open] .cel-ico-fermer { display: block; }
.cel-tiroir-panneau {
  position: fixed; left: 0; right: 0; top: var(--cel-tete-h); bottom: 0; z-index: 1000000;
  background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 18px;
  border-top: 1px solid var(--cel-bord);
}
.admin-bar .cel-tiroir-panneau { top: calc(var(--cel-tete-h) + 46px); }
.cel-tiroir-liste, .cel-tiroir-sec { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.cel-tiroir-liste li, .cel-tiroir-sec li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.cel-tiroir-liste li::before, .cel-tiroir-sec li::before { content: none !important; }
.cel-tiroir-liste a {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px;
  background: var(--cel-fond); border: 1px solid var(--cel-bord);
  color: var(--cel-navy) !important; text-decoration: none !important;
}
.cel-tiroir-liste a[aria-current="page"] { border-color: var(--cel-jaune-fonce); background: #fff8e1; }
.cel-tiroir-liste a span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cel-tiroir-liste b { font: 800 16.5px/1.25 var(--cel-police); }
.cel-tiroir-liste small { font: 500 13.5px/1.4 var(--cel-police); color: var(--cel-gris); margin-top: 2px; }
.cel-tiroir-ico {
  width: 42px; height: 42px; padding: 9px; border-radius: 12px; flex: none;
  background: var(--cel-navy); color: var(--cel-jaune);
}
.cel-tiroir-fl { width: 18px; height: 18px; color: var(--cel-gris); flex: none; }
.cel-tiroir-sec { gap: 2px; padding: 0 4px !important; }
.cel-tiroir-sec a { display: block; padding: 10px 6px; color: var(--cel-navy) !important; text-decoration: none !important; font: 600 15px/1.3 var(--cel-police); border-bottom: 1px solid var(--cel-bord); }
.cel-tiroir-pied { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.cel-tiroir-cnx {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 999px;
  border: 1.5px solid var(--cel-navy); color: var(--cel-navy) !important; text-decoration: none !important;
  font: 700 15px/1.2 var(--cel-police);
}
.cel-tiroir-cnx .cel-ico { width: 20px; height: 20px; }
.cel-tiroir a:focus-visible { outline: 3px solid var(--cel-bleu); outline-offset: 2px; }
html.cel-verrou, html.cel-verrou body { overflow: hidden; }

/* ─── La barre du bas (téléphone) : verre clair, d'un seul tenant, comme celle du .be ─── */
.cel-bas { display: none; }
.cel-bas ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; }
.cel-bas li { flex: 1; min-width: 0; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.cel-bas li::before { content: none !important; }
.cel-bas a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 58px; padding: 0 2px; border-radius: 26px; position: relative;
  color: var(--cel-navy) !important; text-decoration: none !important;
  font: 700 11.5px/1.15 var(--cel-police); text-align: center;
}
.cel-bas a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel-bas .cel-ico { width: 22px; height: 22px; }
.cel-bas a[aria-current="page"] { background: rgba(255, 198, 41, .28); }
.cel-bas a[aria-current="page"] .cel-ico { color: var(--cel-navy); }
.cel-bas a:focus-visible { outline: 3px solid var(--cel-bleu); outline-offset: -3px; }

/* ─── Bandeau des pages de vente ─── */
.cel-tete-vente .cel-tete-in { justify-content: space-between; }

/* ─── Points de rupture ─── */
@media (max-width: 1100px) {
  .cel-tete-in { gap: 14px; padding: 0 18px; }
  .cel-nav a { padding: 10px 10px; font-size: 15px; }
  .cel-nav a[aria-current="page"]::after { left: 10px; right: 10px; }
}
@media (max-width: 1023px) {
  :root { --cel-tete-h: 64px; }
  .cel-nav { display: none; }
  .cel-tiroir { display: block; }
  .cel-logo-1 { font-size: 22px; }
  .cel-logo-2 { font-size: 14px; }
  .cel-logo .cel-marque { width: 40px; height: 40px; }
  .cel-bas {
    display: block; position: fixed; z-index: 999990;
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 4px; border-radius: 30px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(18px) saturate(190%);
    backdrop-filter: blur(18px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow: 0 10px 30px rgba(15, 24, 48, .16), 0 1px 0 rgba(255, 255, 255, .8) inset;
    font-family: var(--cel-police);
  }
  .cel-bas::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
  }
  body.cel-a-barre-bas { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  html.cel-verrou .cel-bas { display: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cel-bas { background: #fff; }
  .cel-tete { background: #fff; }
}
@media (max-width: 640px) {
  .cel-tete-in { padding: 0 14px; gap: 10px; }
  .cel-tete-actions .cel-cnx { display: none; }
  .cel-cta { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
}
@media (max-width: 420px) {
  .cel-tete-actions > .cel-cta { display: none; }
  .cel-tete-vente .cel-tete-actions > .cel-cta { display: inline-flex; }
}
@media (max-width: 360px) {
  .cel-logo-1 { font-size: 20px; }
  .cel-logo-2 { font-size: 13px; }
  .cel-logo .cel-marque { width: 36px; height: 36px; }
  .cel-bas a { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cel-cta, .cel-nav a { transition: none; }
}
@media print {
  .cel-tete, .cel-bas, .cel-evitement { display: none !important; }
}