/* =====================================================================
   Les Deux Frères — Étudiants
   Feuille de style unique, volontairement sans framework CSS externe
   (pas de dépendance réseau : la PWA doit rester utilisable hors-ligne
   et fonctionner même si un CDN est indisponible).
   ===================================================================== */

:root {
  --vert-foret: #123f31;
  --creme: #fff7e8;
  --orange: #ff5d31;
  --citron: #c8ed63;
  --bleu-ciel: #8acfe5;
  --texte: #17201b;

  --bordure: var(--texte);
  --ombre-offset: 4px;

  --rayon-carte: 20px;
  --rayon-pilule: 999px;

  --police-titre: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --police-texte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--police-texte);
  -webkit-tap-highlight-color: transparent;
}

body {
  padding-bottom: 84px; /* place pour la barre de navigation fixe (mobile) */
  min-height: 100vh;
}

@media (min-width: 1024px) {
  /* À partir du desktop, la navigation n'est plus une barre fixe en bas
     (voir .nav-basse plus bas) : plus besoin de réserver de la place. */
  body {
    padding-bottom: 0;
  }
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}

a {
  color: inherit;
}

.masque-visuel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------- */

.entete {
  background: var(--vert-foret);
  color: var(--creme);
  padding: 18px 20px 22px;
  border-bottom: 3px solid var(--bordure);
}

.entete-interieur {
  max-width: 1120px;
  margin: 0 auto;
}

.entete-marque {
  display: flex;
  align-items: center;
  gap: 14px;
}

.entete-marque img {
  /* Le logo principal doit rester bien visible à toutes les tailles
     d'écran : il grandit progressivement avec la largeur de la fenêtre. */
  width: clamp(52px, 6vw, 76px);
  height: clamp(52px, 6vw, 76px);
  object-fit: contain;
  flex-shrink: 0;
}

.entete-marque-texte .nom {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: 0.5px;
  margin: 0;
}

.entete-marque-texte .sous-titre {
  margin: 0;
  font-size: 0.75rem;
  color: var(--citron);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.selecteur-gymnase {
  margin-top: 16px;
}

.selecteur-gymnase button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(255, 247, 232, 0.08);
  border: 2px solid var(--creme);
  border-radius: var(--rayon-pilule);
  color: var(--creme);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}

.selecteur-gymnase img {
  width: 34px;
  height: 24px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--creme);
  padding: 2px;
  box-sizing: border-box;
}

.selecteur-gymnase .chevron {
  margin-left: auto;
  opacity: 0.8;
}

/* --------------------------------------------------------------------
   Contenu principal
   -------------------------------------------------------------------- */

main {
  padding: 20px 18px 32px;
  max-width: 640px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  main {
    max-width: 700px;
    padding: 28px 24px 48px;
  }
}

@media (min-width: 1024px) {
  main {
    /* Conteneur central large pour profiter de l'espace disponible, sans
       jamais aller au-delà d'une largeur confortable (~1120px). */
    max-width: 1120px;
    padding: 36px 40px 64px;
  }

  /* Les vues "texte" (semaine, alerte, installation, fiche détaillée)
     restent lisibles même dans ce conteneur large : leur contenu est
     recentré dans une colonne plus étroite. La vue "Aujourd'hui" est
     l'exception : elle a besoin de toute la largeur pour sa mise en page
     à deux colonnes (voir .vue-aujourdhui plus bas). */
  #zone-vue {
    max-width: 760px;
    margin: 0 auto;
  }

  #zone-vue:has(.vue-aujourdhui) {
    max-width: 1120px;
  }
}

.titre-du-jour {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.4vw + 1rem, 2.6rem);
  line-height: 1.1;
  margin: 6px 0 4px;
}

.date-du-jour {
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--vert-foret);
  opacity: 0.75;
  margin: 0 0 14px;
}

.horaires {
  display: inline-block;
  background: var(--citron);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-pilule);
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------
   Vue "Aujourd'hui" — mise en page.
   Le menu du jour et le menu végétarien sont deux MenuCard strictement
   équivalentes (voir .grille-menus plus bas) : même largeur, même
   hauteur, même structure, sur mobile comme sur ordinateur. Seul le
   nombre de colonnes change avec la largeur d'écran.
   -------------------------------------------------------------------- */

.vue-aujourdhui {
  display: grid;
  grid-template-areas: 'titre' 'menus' 'semaine';
  gap: 4px;
}

.aj-titre {
  grid-area: titre;
}

.aj-menus {
  grid-area: menus;
}

.aj-semaine {
  grid-area: semaine;
}

/* --------------------------------------------------------------------
   Grille des deux MenuCard (menu du jour / menu végétarien).
   Empilées et de même largeur sur mobile et tablette ; côte à côte, de
   même largeur ET de même hauteur (grille CSS = étirement automatique)
   à partir de l'ordinateur.
   -------------------------------------------------------------------- */

.grille-menus {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .grille-menus {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

.carte-menu {
  display: flex;
  flex-direction: column;
}

.etiquette-menu {
  align-self: flex-start;
}

/* Sélecteurs composés (.etiquette.etiquette-menu-xxx) : la spécificité doit
   dépasser celle de la règle générique .etiquette définie plus bas dans la
   feuille de style (même sans cela, l'ordre dans le fichier la ferait
   gagner sinon, et le repère "Menu végétarien" perdrait sa couleur). */
.etiquette.etiquette-menu-jour {
  background: var(--vert-foret);
  color: var(--creme);
}

.etiquette.etiquette-menu-vegetarien {
  background: var(--citron);
  color: var(--vert-foret);
}

.carte-menu h2 {
  font-size: 1.3rem; /* identique sur les deux cartes, jamais réduite pour le menu végétarien */
}

.carte-menu .bouton-details-menu {
  margin-top: auto;
  padding-top: 14px; /* les deux boutons s'alignent en bas de carte même si les textes au-dessus n'ont pas la même longueur */
}

.illustration-plat {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--creme);
  border: 3px solid var(--bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-offset) var(--ombre-offset) 0 var(--bordure);
  margin-top: 10px;
}

.illustration-legende {
  margin: 8px 2px 0;
  font-size: 0.72rem;
  font-style: italic;
  opacity: 0.65;
}

/* --------------------------------------------------------------------
   Cartes — esprit "sticker" : coins arrondis, bordure sombre franche,
   ombre portée dure et décalée (pas de flou dégradé façon dashboard).
   -------------------------------------------------------------------- */

.carte {
  background: var(--creme);
  border: 3px solid var(--bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-offset) var(--ombre-offset) 0 var(--bordure);
  padding: 18px;
  margin-bottom: 18px;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 1024px) {
  .carte {
    padding: 24px;
  }
}

/* Léger effet de survol sur ordinateur uniquement (jamais sur tactile,
   où un hover "collant" serait gênant). */
@media (hover: hover) and (pointer: fine) {
  .carte:hover {
    transform: translate(-2px, -3px);
    box-shadow: 6px 7px 0 var(--bordure);
  }
}

.carte-accent-orange {
  background: var(--orange);
  color: var(--creme);
}

.carte-accent-bleu {
  background: var(--bleu-ciel);
}

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--vert-foret);
  color: var(--creme);
  border-radius: var(--rayon-pilule);
  padding: 4px 12px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.carte h2 {
  font-family: var(--police-titre);
  font-size: 1.3rem;
  margin: 0 0 6px;
}

.carte .accompagnement {
  margin: 0 0 10px;
  font-size: 0.95rem;
  opacity: 0.9;
}

.stats-nutrition {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.stat-pastille {
  background: var(--creme);
  border: 2px solid var(--bordure);
  border-radius: 14px;
  padding: 8px 12px;
  text-align: center;
  min-width: 84px;
}

.carte-accent-orange .stat-pastille {
  background: rgba(255, 247, 232, 0.15);
  border-color: var(--creme);
}

.stat-pastille .valeur {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 700;
}

.stat-pastille .libelle {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.8;
}

.bloc-allergenes {
  margin-top: 14px;
  padding: 12px;
  background: var(--orange);
  color: var(--creme);
  border: 2px solid var(--bordure);
  border-radius: 14px;
  font-weight: 700;
}

.bloc-allergenes .titre-allergenes {
  display: block;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.bloc-allergenes ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bloc-allergenes li {
  background: var(--creme);
  color: var(--texte);
  border-radius: var(--rayon-pilule);
  padding: 3px 10px;
  font-size: 0.78rem;
}

.detail-nutrition {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(29, 42, 35, 0.25);
}

.choix-gymnase-ligne {
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 5px;
  margin-bottom: 9px;
}

.choix-gymnase-ligne.selectionnee { border-color: var(--vert-foret); }
.choix-gymnase-ligne .carte-gymnase { width: 100%; margin: 0; }
.bouton-principal-gymnase {
  width: 100%;
  margin-top: 5px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--orange);
  color: var(--creme);
  font-weight: 700;
  cursor: pointer;
}
.badge-principal {
  display: block;
  margin: 5px 8px 3px;
  color: var(--vert-foret);
  font-size: 0.78rem;
  font-weight: 700;
}

.detail-nutrition h3 {
  margin: 0 0 9px;
  font-family: var(--police-titre);
  font-size: 1rem;
}

.indicateurs-menu p { margin: 5px 0; font-size: 0.88rem; }
.badges-indicateurs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.badges-indicateurs span { padding: 4px 9px; border-radius: var(--rayon-pilule); background: var(--vert-foret); color: var(--creme); font-size: 0.72rem; font-weight: 700; }

/* --------------------------------------------------------------------
   Liste de la semaine
   -------------------------------------------------------------------- */

.liste-semaine .jour-carte {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.liste-semaine .jour-nom {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--vert-foret);
  min-width: 78px;
}

.liste-semaine .jour-plats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Les deux lignes partagent exactement le même poids visuel. Les icônes
   sont dessinées avec le même trait que la navigation de l'application. */
.liste-semaine .jour-plat-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  min-width: 0;
}

.liste-semaine .jour-plat-texte {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-icone-menu {
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border: 1.5px solid var(--bordure);
  border-radius: 50%;
}

.mini-icone-menu svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-icone-jour { background: #f8dccb; color: var(--orange); }
.mini-icone-vegetarien { background: var(--citron); color: var(--vert-foret); }

.liste-semaine .chevron-droit {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  font-size: 1.15rem;
  color: var(--orange);
}

@media (max-width: 520px) {
  .liste-semaine .jour-carte {
    grid-template-columns: 64px minmax(0, 1fr) 28px;
    gap: 8px;
  }
  .liste-semaine .jour-nom { min-width: 0; font-size: 0.76rem; }
  .liste-semaine .jour-plat-ligne { font-size: 0.84rem; gap: 6px; }
  .mini-icone-menu { flex-basis: 24px; width: 24px; height: 24px; }
  .mini-icone-menu svg { width: 15px; height: 15px; }
  .liste-semaine .chevron-droit { width: 26px; height: 26px; }
}

.liste-semaine .jour-carte.aujourdhui {
  border-width: 4px;
  box-shadow: 5px 5px 0 var(--bordure);
}

/* --------------------------------------------------------------------
   Alerte anti-gaspillage
   -------------------------------------------------------------------- */

.carte-alerte {
  background: var(--orange);
  color: var(--creme);
  border-color: var(--bordure);
}

.carte-alerte .etiquette {
  background: var(--vert-foret);
}

.carte-alerte h2 {
  font-size: 1.15rem;
}

.carte-alerte .mention-info {
  margin-top: 12px;
  font-size: 0.72rem;
  opacity: 0.85;
  font-style: italic;
}

.carte-vide {
  text-align: center;
  padding: 32px 20px;
  opacity: 0.8;
}

.carte-vide .emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------
   Navigation basse (onglets)
   -------------------------------------------------------------------- */

.nav-basse {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--vert-foret);
  border-top: 3px solid var(--bordure);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  z-index: 20;
}

.nav-basse button {
  flex: 1;
  background: none;
  border: none;
  color: rgba(255, 247, 232, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px; /* zone tactile confortable */
  padding: 6px 2px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-basse button .icone {
  display: inline-flex;
  width: 22px;
  height: 22px;
}

.nav-basse button .icone svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.nav-basse button.actif {
  color: var(--vert-foret);
  background: var(--citron);
}

.nav-basse button:active {
  transform: scale(0.96);
}

/* --------------------------------------------------------------------
   Navigation desktop : plus une barre fixe collée en bas et étirée sur
   toute la largeur, mais une rangée d'onglets compacte sous l'en-tête,
   alignée avec le reste du contenu.
   -------------------------------------------------------------------- */
@media (min-width: 1024px) {
  #app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .entete {
    order: 0;
  }

  .nav-basse {
    order: 1;
    position: static;
    justify-content: center;
    gap: 6px;
    background: var(--creme);
    border-top: none;
    border-bottom: 3px solid var(--bordure);
    padding: 14px 40px;
  }

  #zone-vue {
    order: 2;
  }

  .nav-basse button {
    flex: none;
    flex-direction: row;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.8rem;
    color: var(--texte);
    background: transparent;
  }

  .nav-basse button .icone {
    width: 20px;
    height: 20px;
  }

  .nav-basse button.actif {
    background: var(--vert-foret);
    color: var(--creme);
  }

  @media (hover: hover) and (pointer: fine) {
    .nav-basse button:not(.actif):hover {
      background: rgba(18, 63, 49, 0.1);
    }
  }
}

/* --------------------------------------------------------------------
   Écran de sélection du gymnase (premier lancement)
   -------------------------------------------------------------------- */

.ecran-selection {
  min-height: 100vh;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
}

.ecran-selection .logo-principal {
  /* Identité principale : doit avoir une vraie présence dès le premier écran. */
  width: clamp(140px, 30vw, 220px);
  margin: 0 auto 22px;
}

.ecran-selection h1 {
  font-family: var(--police-titre);
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 8px;
}

.ecran-selection p.intro {
  text-align: center;
  margin: 0 0 30px;
  opacity: 0.85;
  font-size: 1.02rem;
}

.carte-gymnase {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--creme);
  border: 3px solid var(--bordure);
  border-top: 8px solid var(--bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-offset) var(--ombre-offset) 0 var(--bordure);
  padding: 14px 16px;
  margin-bottom: 14px;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  color: var(--texte);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* léger code couleur par établissement, en repère discret */
.carte-gymnase[data-slug="chamblandes"] { border-top-color: var(--bleu-ciel); }
.carte-gymnase[data-slug="crissier"] { border-top-color: var(--citron); }
.carte-gymnase[data-slug="renens"] { border-top-color: var(--orange); }

.carte-gymnase img {
  width: 60px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  border: 2px solid var(--bordure);
  background: var(--creme);
  padding: 4px;
  box-sizing: border-box;
}

.carte-gymnase .ville {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  opacity: 0.7;
}

.carte-gymnase:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--bordure);
}

@media (hover: hover) and (pointer: fine) {
  .carte-gymnase:hover {
    transform: translate(-2px, -3px);
    box-shadow: 6px 7px 0 var(--bordure);
  }
}

.carte-gymnase.selectionnee {
  background: var(--vert-foret);
  color: var(--creme);
}

.carte-gymnase.selectionnee .ville {
  color: var(--creme);
  opacity: 0.75;
}

@media (min-width: 1024px) {
  .ecran-selection {
    max-width: 900px;
    padding: 60px 40px;
  }

  #liste-gymnases-choix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .carte-gymnase {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 32px 20px;
    margin-bottom: 0;
  }

  .carte-gymnase img {
    width: 100%;
    max-width: 120px;
    height: 72px;
  }
}

/* --------------------------------------------------------------------
   Superposition "changer de gymnase" (accessible depuis l'en-tête).
   -------------------------------------------------------------------- */

.superposition-gymnase {
  position: fixed;
  inset: 0;
  background: rgba(23, 32, 27, 0.6);
  z-index: 30;
  display: flex;
  align-items: flex-end;
}

.superposition-gymnase-panneau {
  width: 100%;
  margin: 0 auto;
  border-radius: 20px 20px 0 0;
  max-width: 640px;
}

@media (min-width: 1024px) {
  .superposition-gymnase {
    align-items: center;
  }

  .superposition-gymnase-panneau {
    border-radius: var(--rayon-carte);
    max-width: 560px;
  }
}

/* --------------------------------------------------------------------
   Boutons génériques
   -------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 3px solid var(--bordure);
  border-radius: var(--rayon-pilule);
  padding: 12px 22px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  background: var(--citron);
  color: var(--vert-foret);
  box-shadow: var(--ombre-offset) var(--ombre-offset) 0 var(--bordure);
}

.bouton:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--bordure);
}

.bouton-secondaire {
  background: var(--creme);
}

.bouton-orange {
  background: var(--orange);
  color: var(--creme);
}

.bouton-pleine-largeur {
  width: 100%;
}

.bouton[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------
   Fiche plat détaillée (page dédiée)
   -------------------------------------------------------------------- */

.fil-retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--vert-foret);
  font-weight: 700;
  padding: 6px 0 16px;
  cursor: pointer;
}

/* --------------------------------------------------------------------
   Guide d'installation
   -------------------------------------------------------------------- */

.etape-installation {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}

.etape-installation .numero {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--vert-foret);
  color: var(--creme);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 2px solid var(--bordure);
}

.etape-installation p {
  margin: 0;
}

/* --------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------- */

.section-titre {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  margin: 26px 0 12px;
}

.texte-discret {
  font-size: 0.82rem;
  opacity: 0.75;
}

.centre {
  text-align: center;
}

.chargement {
  text-align: center;
  padding: 40px 0;
  opacity: 0.7;
}

.celebration-notification {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: rgba(18, 63, 49, 0.14);
  animation: fond-celebration-2f 2.2s ease both;
}

.celebration-notification i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  font-style: normal;
  font-size: clamp(1.7rem, 7vw, 3rem);
  animation: nourriture-pop-2f 1.8s cubic-bezier(.16,.8,.25,1) var(--d) both;
}

.bon-plan-pop {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border: 3px solid var(--bordure);
  border-radius: 22px;
  background: var(--orange);
  color: var(--creme);
  box-shadow: 8px 8px 0 var(--bordure);
  transform: rotate(-3deg);
  animation: bon-plan-pop-2f 2.15s cubic-bezier(.16,1.25,.3,1) both;
}

.bon-plan-pop span { font-size: 2.4rem; }
.bon-plan-pop strong { font-family: var(--police-titre); font-size: clamp(1.3rem, 6vw, 2rem); line-height: .95; letter-spacing: .04em; }

@keyframes bon-plan-pop-2f {
  0% { transform: scale(.25) rotate(-14deg); opacity: 0; }
  24%, 72% { transform: scale(1) rotate(-3deg); opacity: 1; }
  84% { transform: scale(1.06) rotate(2deg); opacity: 1; }
  100% { transform: scale(.72) rotate(6deg); opacity: 0; }
}

@keyframes nourriture-pop-2f {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-145px) rotate(var(--back-angle)) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-180px) rotate(var(--back-angle)) scale(.5); opacity: 0; }
}

@keyframes fond-celebration-2f {
  0%, 100% { background: rgba(18, 63, 49, 0); }
  18%, 75% { background: rgba(18, 63, 49, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-notification { display: none; }
}