/* public/css/screens/menu.css — styles propres à pages/menu.php (chargé via $screen_css='menu').
   Pour l'instant : uniquement le teaser « Story Mon Année » (partials/story-teaser.php).
   Le reste de l'écran menu (.menu-hero, .daycard, .dishgrid, .chef…) vit dans screens.css
   (fichier structurant partagé, non touché ici). Aucune couleur en dur : uniquement var(--*). */

.story-teaser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--navy-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 16px 18px;
    /* Marge fixée par le propriétaire : léger espace vertical (5px) + retrait latéral 25px. */
    margin: 5px 25px;
}

.story-teaser__main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.story-teaser__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--navy-ink);
    flex-shrink: 0;
}

.story-teaser__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.story-teaser__badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--navy-ink);
}

.story-teaser__title {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.story-teaser__sub {
    font-size: 12px;
    color: var(--ink-60);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-teaser__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-ink);
    white-space: nowrap;
    flex-shrink: 0;
}

.story-teaser__dismiss-form {
    flex-shrink: 0;
    margin: 0;
}

.story-teaser__dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ink-60);
    cursor: pointer;
    padding: 0;
}
.story-teaser__dismiss:hover { background: var(--line); color: var(--ink); }
.story-teaser__dismiss:focus-visible { outline: 2px solid var(--navy-ink); outline-offset: 2px; }

@media (max-width: 640px) {
    .story-teaser__sub { display: none; }
    .story-teaser__cta { display: none; }
}

@media (max-width: 480px) {
    .story-teaser { padding: 12px 14px; gap: 10px; }
    .story-teaser__icon { width: 34px; height: 34px; }
}

/* ---------- « Ordering for » : troncature + responsive des chips enfant ----------
   .ordering / .child-btn / .child-avatar sont définis dans public/css/screens.css (fichier
   structurant partagé, non touché ici) — ces règles les SURCHARGENT en cascade (menu.css est
   chargé APRÈS screens.css dans partials/head.php), sans dupliquer leur mise en page de base.
   Nom complet toujours disponible en `title` côté template (pages/menu.php) : la troncature ici
   est purement visuelle. Tokens uniquement, light + dark (aucune couleur ajoutée). */
.ordering { row-gap: 8px; }
.child-btn {
    max-width: 240px;
    min-width: 0; /* item flex de .ordering : sans ça, le contenu empêche tout rétrécissement */
}
.child-btn__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* .child-btn est lui-même display:flex : idem pour son enfant texte */
}

/* Tablette/desktop : plusieurs chips par ligne (comportement déjà permis par le flex-wrap de
   .ordering) — on borne juste leur largeur individuelle pour que la troncature ait un effet. */
@media (min-width: 481px) {
    .ordering { column-gap: 12px; }
}

/* Mobile ≤480 (cible PWA) : chips empilées pleine largeur plutôt qu'un flex-wrap qui pourrait
   couper un libellé sur un fragment de ligne. */
@media (max-width: 480px) {
    .ordering { flex-direction: column; align-items: stretch; width: 100%; }
    .child-btn { max-width: none; width: 100%; }
    .child-btn__label { flex: 1; }
}

/* ---------- Bandeau « entre deux années scolaires » (LOT T14) ----------
   Visible aux VISITEURS ET aux comptes connectés — contrairement aux annonces admin
   (partials/announcements.php), qui ne sont require-ées QUE pour un $authId connecté et dont le
   <style> inline ne charge donc jamais côté invité. La clôture d'année bloque TOUT LE MONDE
   (cart_add()/order_repo_checkout() refusent quel que soit le compte), le bandeau doit donc être
   garanti par ce fichier CSS ($screen_css='menu', chargé inconditionnellement), pas par un style
   qui dépend de l'auth.
   Gabarit visuel DUPLIQUÉ (pas importé) de `.annc-banner`/`.annc-banner--info` : mêmes rayons,
   paddings, gap — cohérence visuelle si les deux bandeaux s'empilent chez un connecté. Ton "info"
   (navy), jamais "urgent" (rouge/accent) : ce n'est pas une panne, c'est une pause calendaire
   normale. Tokens dark-aware UNIQUEMENT (§5bis STANDARDS-UI) :
     - fond/bordure  : var(--navy) / var(--navy-soft) — rôle APLAT/TEINTE, jamais en `color:`.
     - icône         : fond var(--navy) + encre #fff -> **11,6:1 en clair, calculé par moi**
                       (luminance relative WCAG sur #013480, marque Servair actuelle : R=1 G=52
                       B=128/255 -> L=0,0402 ; (1,0+0,05)/(0,0402+0,05) = 11,64). En sombre, citation
                       exacte de theme.css:88 : « Blanc sur --navy (72%) = 5,29:1 ✓ ». Les deux tiennent
                       le seuil AA composant 3:1 avec large marge ; --navy porte déjà ce même blanc sur
                       `.btn--primary`/`.pill--navy` ailleurs sur le site (aplat non retouché ici).
     - titre/texte   : var(--ink) / var(--ink-70) — PAS var(--navy-ink) : le fond est un TINT clair
                       (12% marque + blanc, quasi-blanc), pas un aplat sombre ; --ink dessus est le
                       même contraste que n'importe quel texte de card sur --navy-soft ailleurs
                       (`.annc-banner--info` en production sur cette page pour les connectés). */
.ay-banner-wrap { padding: 16px 16px 0; }
@media (min-width: 768px) { .ay-banner-wrap { padding: 20px 32px 0; } }
.ay-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--r-panel, 16px);
    border: 1px solid var(--navy);
    background: var(--navy-soft);
}
.theme-dark .ay-banner { background: color-mix(in oklch, var(--navy) 22%, var(--surface)); }
.ay-banner__icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
}
.ay-banner__body { min-width: 0; flex: 1; }
.ay-banner__title { font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.ay-banner__text { font-size: 13px; color: var(--ink-70); margin-top: 2px; line-height: 1.45; }

/* ---------- Calendrier mensuel + CTA historique : RETIRÉS (lot frontend-1, 2026-08-11) ----------
   Le sélecteur "Voir en calendrier" (.calpicker*/.calgrid*/.calday*) et le CTA historique
   (.menu-history-cta-wrap) ont été retirés de pages/menu.php (décision propriétaire directe) : le
   CTA historique est déplacé sur pages/orders.php (.orders-history-cta, public/css/screens/orders.css).
   Rien à styler ici pour ces composants. */