/* Miamsolidaire — installation sur le telephone + barre de navigation
   de la page d'accueil publique. Ajoute apres style.css, ne remplace rien. */

/* L'attribut hidden doit toujours l'emporter sur un display de classe */
[hidden] { display: none !important; }

/* ---------- Bouton « Installer l'application » ---------- */
.btn-pwa {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--green-200); background: var(--green-50);
  color: var(--green-700); font-weight: 700; font-size: .84rem;
  padding: .5rem .85rem; border-radius: 999px; cursor: pointer;
  font-family: inherit; line-height: 1; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease;
}
.btn-pwa:hover { background: var(--green-100); border-color: var(--green-600); }
.btn-pwa svg { flex: 0 0 auto; }

/* ---------- Bandeau d'invitation sur la page d'accueil ---------- */
.pwa-bandeau {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--green-600), var(--green-900));
  color: #fff; border-radius: 18px; padding: 1.15rem 1.3rem; margin: 2rem 0;
}
.pwa-bandeau-ico {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px;
  background: rgba(255, 255, 255, .16); display: grid; place-items: center;
}
.pwa-bandeau-txt { flex: 1 1 260px; min-width: 0; }
.pwa-bandeau-txt strong { display: block; font-size: 1rem; margin-bottom: .2rem; }
.pwa-bandeau-txt p { margin: 0; font-size: .85rem; color: rgba(255, 255, 255, .86); }
.pwa-bandeau .btn-pwa {
  background: #fff; border-color: #fff; color: var(--green-900);
  padding: .62rem 1.1rem; font-size: .88rem;
}
.pwa-bandeau .btn-pwa:hover { background: var(--green-50); border-color: var(--green-50); }

/* ---------- Fenetre d'explication ---------- */
.pwa-aide { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; }
.pwa-aide-fond { position: absolute; inset: 0; background: rgba(23, 36, 29, .55); }
.pwa-aide-carte {
  position: relative; width: min(460px, 100%); max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 20px; padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: 0 24px 60px rgba(20, 83, 45, .28);
}
.pwa-aide-fermer {
  position: absolute; top: .85rem; right: .85rem; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: var(--green-50); color: var(--ink-soft);
  display: grid; place-items: center; cursor: pointer;
}
.pwa-aide-tete { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.1rem; padding-right: 1.8rem; }
.pwa-aide-logo {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 14px; color: #fff;
  background: linear-gradient(145deg, var(--green-600), var(--green-900));
  display: grid; place-items: center;
}
.pwa-aide-tete h3 { margin: 0 0 .3rem; font-size: 1.08rem; color: var(--ink); }
.pwa-aide-tete p { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.5; }

.pwa-etape { border: 1px solid var(--line, #e3ebe5); border-radius: 14px; margin-bottom: .7rem; overflow: hidden; }
.pwa-etape summary { list-style: none; cursor: pointer; padding: .8rem .95rem; background: var(--green-50); }
.pwa-etape summary::-webkit-details-marker { display: none; }
.pwa-etape-os { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; color: var(--green-900); }
.pwa-etape ol { margin: 0; padding: .9rem 1.1rem .95rem 2.2rem; }
.pwa-etape li { font-size: .86rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: .45rem; }
.pwa-etape li:last-child { margin-bottom: 0; }
.pwa-aide-carte .btn-block { margin-top: .9rem; width: 100%; }

/* ---------- Barre de navigation de la page d'accueil publique ---------- */
.landing-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: #fff; border-top: 1px solid var(--line, #e3ebe5);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 20px rgba(20, 40, 25, .06);
}
.landing-nav a, .landing-nav button {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  display: grid; justify-items: center; gap: .2rem; padding: .45rem .2rem;
  font-size: .66rem; font-weight: 600; color: var(--muted);
  text-decoration: none; border-radius: 10px; min-width: 0;
}
.landing-nav a.actif, .landing-nav a:hover, .landing-nav button:hover { color: var(--green-700); }
.landing-nav .est-primaire { color: var(--green-700); }
.landing-nav svg { width: 21px; height: 21px; }
.landing-nav span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* La barre ne doit jamais recouvrir la fin de la page */
body.landing { padding-bottom: 64px; }

@media (min-width: 861px) {
  .landing-nav { display: none; }
  body.landing { padding-bottom: 0; }
}

/* ---------- Ecran « choisissez votre mot de passe » ---------- */
.mdp-card { text-align: left; }
.mdp-pastille {
  display: flex; width: fit-content; align-items: center; gap: .4rem; margin: .9rem 0 .7rem;
  background: var(--orange-50, #fff5ea); color: var(--orange-dark, #d9660f);
  font-size: .76rem; font-weight: 700; padding: .35rem .7rem; border-radius: 999px;
}
.mdp-erreur { display: block; margin-bottom: .8rem; }
.mdp-aide { margin: .9rem 0 0; font-size: .78rem; color: var(--muted); line-height: 1.5; }

/* ---------- Bloc « Prêt à sauver votre premier aliment ? » ----------
   Ce bloc porte a la fois la classe container (qui reserve 20 px de marge de
   chaque cote) et son propre padding, qui ecrase cette marge : le rectangle
   vert touchait donc les deux bords de l'ecran, alors que tout le reste de la
   page est aligne en retrait. On lui rend ces marges. */
.cta-final .cta-box {
  width: calc(100% - 40px);
  max-width: 1140px;
}
.cta-final .cta-box h2 { text-wrap: balance; }

/* ---------- Phrase vivante du hero ----------
   Remplace le surlignage orange derriere « Partagez pres de chez vous » par un
   degrade qui traverse lentement le texte, dans les couleurs de l'activite.
   Le texte lui-meme n'est pas touche. L'animation se coupe pour les visiteurs
   qui demandent moins de mouvement dans les reglages de leur telephone. */
.hero h1 .hl {
  background: linear-gradient(100deg,
    #1e7a3c 0%, #2e9e4f 22%, #ef7a1f 44%, #2e9e4f 66%, #14532d 88%, #1e7a3c 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: miam-phrase 8s ease-in-out infinite;
}
@keyframes miam-phrase {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .hl { animation: none; background-position: 18% 50%; }
}

/* ---------- Hero sur mobile ----------
   Le collage de photos existait deja, mais la grille le place APRES le texte :
   sur telephone, le visiteur arrivait donc sur un bloc de texte nu et ne voyait
   les photos qu'apres avoir fait defiler. On le remonte au-dessus du titre, en
   une seule photo large plutot qu'en mosaique de vignettes, avec le repere
   « aliments partages » pose dessus. Aucun texte n'est modifie. */
@media (max-width: 860px) {
  .hero { padding-top: 1.3rem; }
  .hero-grid { gap: 1.6rem; }
  .hero-visual { order: -1; }
  .hero-collage { grid-template-columns: 1fr; gap: 0; }
  .hero-collage img:first-child {
    grid-row: auto; min-height: 0; height: 215px;
  }
  .hero-collage img:not(:first-child) { display: none; }
  .hero-badge { bottom: 12px; left: 12px; padding: .55rem .8rem; }
}

/* ---------- Petits ecrans ----------
   La barre du bas remplace le menu hamburger : il est donc retire, et la
   place ainsi liberee accueille le bouton d'installation. Attention a la
   largeur totale de l'en-tete : s'il deborde, la page s'elargit au-dela de
   l'ecran et TOUT ce qui est en position fixe (barre du bas comprise) se
   retrouve decale hors du champ. D'ou l'icone seule sous 600 px. */
@media (max-width: 860px) {
  .nav-toggle { display: none !important; }
  .btn-pwa-txt { display: none; }
  .btn-pwa { padding: .5rem .62rem; }
}