:root { --fond: #fbfaf8; --encre: #1c1b19; --doux: #6b6862; --trait: #e5e1d8;
        --accent: #8c2f39; --accent-fonce: #6f242c; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 -apple-system, system-ui, sans-serif;
       color: var(--encre); background: var(--fond); }

.bandeau { position: sticky; top: 0; z-index: 500; background: var(--fond);
           border-bottom: 1px solid var(--trait); padding: .6rem .9rem;
           padding-top: calc(.6rem + env(safe-area-inset-top)); }
.marque { font-weight: 700; text-decoration: none; color: inherit; }

.filtres { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.filtres input, .filtres select, .filtres button, .bascule {
  font: inherit; padding: .35rem .6rem; border: 1px solid var(--trait);
  border-radius: 8px; background: #fff; color: inherit; text-decoration: none; }
.filtres input[type=search] { flex: 1 1 8rem; min-width: 0; }

main { padding: .9rem; }
.compte { color: var(--doux); font-size: .85rem; margin: 0 0 .6rem; }
.restos { list-style: none; margin: 0; padding: 0; }
.restos li { padding: .6rem 0; border-bottom: 1px solid var(--trait); }
.restos a { color: inherit; font-weight: 600; text-decoration: none; }
.meta { display: block; color: var(--doux); font-size: .85rem; }

.fiche h1 { margin: 0 0 .2rem; font-size: 1.5rem; }
.fiche .adresse { margin: .8rem 0 .2rem; }
.stations { list-style: none; padding: 0; margin: .4rem 0; color: var(--doux);
            font-size: .9rem; }
.bio, .commentaire { white-space: pre-line; }
.commentaire { border-left: 3px solid var(--trait); padding-left: .7rem; }
.liens { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.liens a { padding: .4rem .8rem; border: 1px solid var(--trait); border-radius: 8px;
           background: #fff; color: inherit; text-decoration: none; }

#carte { height: calc(100vh - 8.5rem); min-height: 320px; border-radius: 10px; }
.autour { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom));
          left: 50%; transform: translateX(-50%); z-index: 600;
          font: inherit; padding: .55rem 1.1rem; border: 1px solid var(--trait);
          border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / .12); }

.nav { display: flex; gap: .9rem; align-items: baseline; }
.nav a { color: var(--doux); text-decoration: none; font-size: .9rem; }
.nav .marque { color: var(--encre); font-size: 1rem; margin-right: auto; }

h1 { font-size: 1.5rem; margin: 0 0 .6rem; }
h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--doux); font-weight: 600; }
.bloc { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--trait); }

.connexion { display: flex; flex-direction: column; gap: .7rem; max-width: 22rem; }
.connexion label { display: flex; flex-direction: column; gap: .25rem;
                   font-size: .85rem; color: var(--doux); }
input, select, textarea, button { font: inherit; padding: .45rem .6rem;
  border: 1px solid var(--trait); border-radius: 8px; background: #fff; color: var(--encre); }
button { cursor: pointer; }
button.discret { background: transparent; border-color: var(--trait); color: var(--doux);
                 padding: .3rem .6rem; font-size: .85rem; }
.ligne-form { display: inline-flex; gap: .4rem; margin: .2rem .3rem .2rem 0; }
.erreur { color: #a3311f; }
.ok { color: #2c6e49; }

.marque { display: flex; flex-direction: column; gap: .6rem; max-width: 26rem; }
.marque .choix { display: flex; gap: 1rem; }
.marque .choix label { display: inline-flex; gap: .3rem; align-items: center;
                       font-size: .9rem; }
.avis { list-style: none; padding: 0; margin: 0; }
.avis li { padding: .4rem 0; border-bottom: 1px solid var(--trait); font-size: .9rem; }

/* --- Page de connexion ------------------------------------------------
   Plein écran, composition centrée. `100dvh` et non `100vh` : sur iOS la
   barre d'adresse rétracte la hauteur et un `vh` laisserait la carte
   décalée sous le pli. */
/* `main` a un padding pour les pages ordinaires ; ici la page doit aller
   bord à bord, sinon un liseré de fond apparaît au-dessus du dégradé. */
main:has(.accueil-connexion) { padding: 0; }

.accueil-connexion {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  /* Deux halos très doux : la page respire sans motif ni image. */
  background:
    radial-gradient(60rem 40rem at 15% -10%, #f3ede2 0%, transparent 60%),
    radial-gradient(45rem 35rem at 110% 110%, #efe7dc 0%, transparent 55%),
    var(--fond);
}

.carte-connexion {
  width: min(23rem, 100%);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 2.4rem 2rem 2rem;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgb(28 27 25 / .04), 0 12px 32px -12px rgb(28 27 25 / .16);
}

.carte-connexion .fourchette {
  width: 26px; height: 46px;
  color: var(--accent);
  align-self: center;
}

.carte-connexion h1 {
  margin: .3rem 0 0;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

.carte-connexion .accroche {
  margin: 0 0 .6rem;
  text-align: center;
  color: var(--doux);
  font-size: .85rem;
}

.champ { display: flex; flex-direction: column; gap: .3rem; }
.champ span {
  font-size: .8rem;
  color: var(--doux);
}
.champ input {
  padding: .6rem .75rem;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: var(--fond);
  font-size: 1rem;  /* sous 16px, iOS zoome au focus */
  transition: border-color .15s, box-shadow .15s;
}
.champ input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(140 47 57 / .12);
  background: #fff;
}

button.principal {
  margin-top: .5rem;
  padding: .7rem;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fdfbf8;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .15s;
}
button.principal:hover { background: var(--accent-fonce); }
button.principal:active { transform: translateY(1px); }

.alerte {
  margin: 0;
  padding: .55rem .7rem;
  border-radius: 8px;
  background: rgb(140 47 57 / .07);
  color: var(--accent-fonce);
  font-size: .85rem;
}