/* L'annonce du Souper spaghetti, en haut de chaque page (src/partials/annonce.html).
   À retirer après le 14 novembre 2026 avec le reste (voir le commentaire de annonce.html).
   Le script du <head> pose .sans-souper sur <html> pour qui l'a fermée, et pour tous
   à partir du 15 novembre : l'annonce n'apparaît alors pas du tout, sans clignoter. */
.sans-souper .ce-souper-bar { display: none; }

/* Sur une nappe à carreaux rouges, celle de l'assiette de spaghetti de l'affiche
   (2026-10-18; c'étaient les drapeaux d'Afrique qui défilaient). La nappe ne bouge
   pas : un vichy se lit mieux immobile. L'annonce tient sur une ligne, dans une
   pastille encre au milieu. Sur un téléphone, la nappe passe sur sa propre bande,
   l'annonce en dessous.

   Les carreaux : souper-vichy.svg est un motif de 2 x 2 (rouge #C8453C où deux
   bandes se croisent, rose #E2A39C pour une seule, crème #FAF9F5), tracé net
   (crispEdges) et posé à 26 px, donc des carreaux de 13 px : quatre rangées sur
   les 52 px de l'ordinateur, deux sur la bande de 26 px du téléphone. */
.ce-souper-bar {
  position: relative; z-index: 41; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 6px 56px;
  background: var(--bg, #FAF9F5);
  font: 500 .9375rem/1.3 var(--sans); color: #fff;
}
.ce-souper-bar::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/img/souper-vichy.9cae22f807.svg") 0 0 / 26px 26px repeat;
  pointer-events: none;
}

.ce-souper-bar-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 0; padding: 7px 20px; border-radius: 999px; white-space: nowrap;
  background: var(--ink, #141413); box-shadow: 0 8px 22px -10px rgba(20, 20, 19, .6);
}
.ce-souper-bar-inner > * { line-height: 1; text-box: trim-both cap alphabetic; }
.ce-souper-bar strong { font-family: var(--serif); font-weight: 600; font-size: 1rem; color: #fff; }
/* Sans text-box (Firefox, pour l'instant), le titre en Source Serif paraît un peu
   bas : on le remonte d'un pixel. Surtout pas d'overflow: hidden sur ces textes,
   il couperait les jambages du p et du q une fois la boîte rognée. */
@supports not (text-box: trim-both cap alphabetic) { .ce-souper-bar strong { position: relative; top: -1px; } }
.ce-souper-bar-date { color: #C9C6BC; font-size: .875rem; }
.ce-souper-bar a {
  color: #F2B79F; font-weight: 600; font-size: .875rem;
  text-decoration: underline; text-decoration-color: rgba(242, 183, 159, .6); text-underline-offset: 3px;
}
.ce-souper-bar a:hover { color: #fff; text-decoration-color: #fff; }
.ce-souper-bar-close {
  position: absolute; z-index: 2; right: 6px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--ink, #141413); color: #fff;
  box-shadow: 0 4px 14px -6px rgba(20, 20, 19, .6);
}
.ce-souper-bar-close:hover { background: #2A2926; }
.ce-souper-bar-close svg { width: 16px; height: 16px; }

@media (max-width: 767px) {
  /* Deux bandes de même hauteur, 26 px chacune : la nappe, puis l'annonce. */
  .ce-souper-bar {
    --ce-bande: 26px;
    display: block; min-height: 0; padding: var(--ce-bande) 0 0;
    background: var(--ink, #141413);
  }
  .ce-souper-bar::before { bottom: auto; height: var(--ce-bande); }
  .ce-souper-bar-inner {
    height: var(--ce-bande); padding: 0 48px 0 12px; gap: 10px;
    border-radius: 0; box-shadow: none; line-height: 1;
  }
  .ce-souper-bar strong { font-size: .9375rem; }
  .ce-souper-bar a { font-size: .8125rem; }
  /* Le x reste dessiné dans la bande noire, mais sa zone de toucher monte
     derrière la nappe : 44 x 52 px, au lieu des 26 px de la bande seule. */
  .ce-souper-bar-close {
    top: 0; bottom: 0; right: 0; transform: none; width: 44px; height: auto;
    border-radius: 0; box-shadow: none; background: transparent;
    align-items: end; padding-bottom: 5px;
  }
  .ce-souper-bar-close:hover { background: transparent; }
  .ce-souper-bar-close svg { width: 15px; height: 15px; }
}
/* Une seule ligne, quelle que soit la largeur : la date s'efface d'abord, puis
   « mes places » (le lien garde son nom complet pour les lecteurs d'écran). */
@media (max-width: 599px) { .ce-souper-bar .ce-souper-bar-date { display: none; } }
@media (max-width: 399px) { .ce-souper-bar-plus { display: none; } }

/* ---- L'annonce suit la barre de navigation ------------------------------------- */
/* À la demande de David (2026-10-02) : l'annonce reste collée en haut, la barre de
   navigation juste en dessous. Elle fait 52 px partout (quatre rangées de carreaux
   sur ordinateur, deux bandes de 26 px sur téléphone). Tout ce qui se
   règle sur la hauteur de l'en-tête descend d'autant : les ancres, les panneaux
   collants et le menu du téléphone. Une fois l'annonce fermée (.sans-souper),
   rien de tout cela ne s'applique.
   Sur un écran très bas (un téléphone à l'horizontale), les deux barres
   prendraient plus du tiers de l'écran : l'annonce y défile avec la page. */
@media (min-height: 500px) {
  html:not(.sans-souper) { --annonce-h: 52px; scroll-padding-top: calc(var(--header-h) + var(--annonce-h) + 16px); }
  html:not(.sans-souper) .ce-souper-bar { position: sticky; top: 0; }
  html:not(.sans-souper) .site-header { top: var(--annonce-h); }
  html:not(.sans-souper) .sticky { top: calc(var(--header-h) + var(--annonce-h) + 24px); }
}
@media (min-height: 500px) and (max-width: 1023px) {
  html:not(.sans-souper) .site-nav { top: calc(var(--header-h) + var(--annonce-h)); }
}