/* ============================================================
     LA TABLE DRESSÉE

       la nappe ......... vichy rouge, plein cadre, mais dans les marges
       le set de table .. carte crème opaque, le contenu vit dessus
       le convive ....... l'enseigne : serviette au cou, couverts en main
       le rond de serviette . la forme des raccourcis

     Typographie : un arrondi gras pour l'enjouement, un serif pour
     la prose des cartes. Le couple dit le brief : fun + vieille France.
     ============================================================ */

  :root {
    --nappe:  #d33f2e;
    --bleu:   #2c5c8f;
    --beurre: #f2c14e;
    --creme:  #fffcf4;
    --encre:  #221d18;
    --sourd:  #8a7d6d;
    --filet:  #eadfc9;

    --rond:  "Arial Rounded MT Bold", ui-rounded, "SF Pro Rounded",
             "Nunito", system-ui, sans-serif;
    --serif: "Iowan Old Style", "Hoefler Text", "Palatino Linotype",
             Palatino, Georgia, serif;
  }

  * { box-sizing: border-box; }

  html { color-scheme: light; overflow-x: hidden; }

  body {
    margin: 0;
    color: var(--encre);
    font-family: var(--serif);
    font-size: 1.04rem; line-height: 1.6;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(211, 63, 46, .18);
    -webkit-font-smoothing: antialiased;

    background: #fdf7ec;
  }

  /* ---------- le bandeau de nappe ----------
     La nappe ne couvre plus la page : elle tient dans un bandeau, et le
     set de table vient chevaucher son bord inférieur. Le tissu passe donc
     visiblement SOUS le set — ce que la pleine page ne racontait pas, en
     plus de fatiguer l'œil. */
  .bandeau {
    height: clamp(7rem, 15vh, 10.5rem);
    display: flex; align-items: center; justify-content: center;
    /* deux bandes croisées : leur superposition fonce d'elle-même */
    background-color: #fbeadb;
    background-image:
      linear-gradient(90deg, rgba(211, 63, 46, .26) 50%, transparent 50%),
      linear-gradient(rgba(211, 63, 46, .26) 50%, transparent 50%);
    background-size: 54px 54px;
    border-bottom: 1px solid rgba(34, 29, 24, .1);
  }

  .table {
    max-width: 52rem; margin: 0 auto;
    padding: 0 1rem 4rem; margin-top: -2.2rem;
  }

  /* ---------- l'enseigne ---------- */
  .enseigne { display: flex; align-items: center; gap: .8rem; }
  .enseigne svg { width: 54px; height: 54px; flex: none; }
  .enseigne .nom {
    box-shadow: 0 2px 8px -3px rgba(34, 29, 24, .45);
    font-family: var(--rond); font-size: .74rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--creme); background: var(--bleu);
    padding: .38rem .85rem; border-radius: 999px;
  }

  /* ---------- le set de table ---------- */
  .set {
    background: var(--creme);
    border-radius: 22px;
    padding: clamp(1.6rem, 4.5vw, 3rem);
    box-shadow: 0 14px 40px -22px rgba(34, 29, 24, .5);
  }

  /* L'envie est une phrase qu'on laisse en suspens : le champ la termine.
     Un titre affirmatif demandait au visiteur de traduire son envie en
     requête ; là, il n'a qu'à finir sa phrase. */
  h1 {
    margin: 0 0 .9rem;
    font-family: var(--rond); font-weight: 700;
    font-size: clamp(2rem, 1.2rem + 4vw, 3.3rem);
    line-height: 1.02; letter-spacing: -.02em; text-wrap: balance;
  }
  h1 .points { color: var(--nappe); }

  /* ---------- la commande ---------- */
  .commande {
    position: relative; display: flex; align-items: center; gap: .7rem;
    background: #fff; border: 2px solid var(--filet); border-radius: 999px;
    padding: .45rem .45rem .45rem 1.3rem;
  }
  .commande:focus-within { border-color: var(--nappe); }

  #q {
    flex: 1; min-width: 0; border: 0; background: none; color: var(--encre);
    font-family: var(--serif); font-size: clamp(1.05rem, .95rem + .6vw, 1.3rem);
    padding: .5rem 0;
  }
  #q:focus { outline: none; }
  #q::placeholder { color: var(--sourd); opacity: 1; }

  .servir {
    flex: none; cursor: pointer;
    font-family: var(--rond); font-weight: 700; font-size: .86rem;
    letter-spacing: .04em; border: 0; border-radius: 999px;
    padding: .62rem 1.25rem;
    background: var(--nappe); color: var(--creme);
    transition: background-color .15s, transform .1s;
  }
  .servir:hover { background: #b83425; }
  .servir:active { transform: scale(.97); }

  /* ---------- le lieu ---------- */
  .lieu {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .8rem; cursor: pointer;
    font-family: var(--rond); font-size: .82rem; font-weight: 700;
    color: var(--bleu); background: transparent;
    border: 2px solid var(--filet); border-radius: 999px;
    padding: .3rem .85rem .3rem .6rem;
    transition: border-color .15s, color .15s;
  }
  .lieu:hover { border-color: var(--bleu); }
  .lieu svg { width: 13px; height: 13px; flex: none; }
  .lieu .chevron { opacity: .5; font-size: .7em; }

  .villes {
    list-style: none; margin: .5rem 0 0; padding: .3rem;
    background: #fff; border: 2px solid var(--filet); border-radius: 14px;
    max-width: 17rem;
    box-shadow: 0 14px 30px -20px rgba(34, 29, 24, .5);
  }
  .villes[hidden] { display: none; }
  .villes li {
    padding: .4rem .8rem; border-radius: 999px; font-size: .98rem;
    display: flex; align-items: center; gap: .5rem;
  }
  .villes li.dispo { cursor: pointer; }
  .villes li.dispo[aria-current="true"] { background: var(--bleu); color: var(--creme); }
  .villes li.bientot { color: var(--sourd); cursor: default; }
  .villes li.bientot .quand {
    margin-left: auto; font-family: var(--rond); font-size: .66rem;
    letter-spacing: .1em; text-transform: uppercase; opacity: .8;
  }

  /* ---------- les propositions ----------
     Une carte de restaurant, pas une rangée de boutons : ligne de plat,
     filet de pointillés, nombre d'adresses à droite. La forme dit déjà
     de quoi il s'agit, et les lignes se déroulent au chargement comme on
     déplie un menu. */
  .ardoise {
    margin-top: 2.2rem; padding-top: 1.4rem;
    border-top: 2px solid var(--filet);
  }
  .ardoise .intitule {
    margin: 0 0 .3rem; font-family: var(--rond); font-weight: 700;
    font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sourd);
  }

  .props { display: flex; flex-direction: column; }
  .prop {
    display: flex; align-items: baseline; gap: .5rem;
    width: 100%; cursor: pointer; text-align: left;
    background: none; border: 0; padding: .62rem 0;
    color: var(--encre); font-family: var(--serif); font-size: 1.06rem;
    animation: derouler .5s cubic-bezier(.2, .7, .3, 1) both;
    animation-delay: calc(var(--i) * 65ms);
  }
  @keyframes derouler {
    from { opacity: 0; transform: translateY(-7px); }
  }
  .prop .quoi {
    font-family: var(--rond); font-weight: 700;
    font-size: clamp(1.06rem, 1rem + .35vw, 1.24rem);
    transition: color .15s;
  }
  .prop .filet {
    flex: 1; min-width: 1.5rem; align-self: center;
    border-bottom: 2px dotted var(--filet);
    transition: border-color .15s;
  }
  .prop .combien {
    flex: none; font-family: var(--rond); font-size: .78rem; font-weight: 700;
    color: var(--sourd); font-variant-numeric: tabular-nums;
    transition: color .15s;
  }
  .prop:hover .quoi, .prop:focus-visible .quoi { color: var(--nappe); }
  .prop:hover .filet { border-color: var(--nappe); }
  .prop:hover .combien { color: var(--nappe); }

  .hasard {
    align-self: flex-start; margin-top: .9rem; cursor: pointer;
    font-family: var(--rond); font-size: .82rem; font-weight: 700;
    color: var(--bleu); background: transparent;
    border: 2px solid var(--filet); border-radius: 999px;
    padding: .34rem 1rem;
    animation: derouler .5s cubic-bezier(.2, .7, .3, 1) both;
    animation-delay: calc(var(--i) * 65ms);
    transition: border-color .15s;
  }
  .hasard:hover { border-color: var(--bleu); }

  /* ---------- suggestions ---------- */
  .sugg {
    list-style: none; margin: 0; padding: .35rem;
    position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 30;
    background: #fff; border: 2px solid var(--filet); border-radius: 16px;
    box-shadow: 0 16px 34px -22px rgba(34, 29, 24, .55);
    max-height: 15rem; overflow-y: auto; overscroll-behavior: contain;
  }
  .sugg[hidden] { display: none; }
  .sugg li {
    display: flex; align-items: center; gap: .6rem; cursor: pointer;
    padding: .5rem .85rem; border-radius: 999px; font-size: 1.02rem;
  }
  .sugg li[aria-selected="true"] { background: var(--nappe); color: var(--creme); }
  .sugg .n {
    margin-left: auto; font-family: var(--rond); font-size: .74rem;
    font-weight: 700; opacity: .65;
  }

  /* ---------- l'addition ---------- */
  .reponse {
    margin: 2.2rem 0 1.2rem; font-size: 1.12rem; max-width: 33rem;
    text-wrap: pretty;
  }
  .reponse b { color: var(--nappe); font-weight: 400; font-style: italic; }

  .plat {
    padding: 1.5rem 0; border-top: 2px dotted var(--filet);
    animation: servir .4s ease both;
  }
  .plat:first-of-type { border-top: 0; }
  @keyframes servir { from { opacity: 0; transform: translateY(10px); } }

  .ligne { display: flex; align-items: baseline; gap: .9rem; }
  .nom-plat {
    flex: 1; min-width: 0; margin: 0;
    font-family: var(--rond); font-weight: 700;
    font-size: clamp(1.12rem, 1rem + .6vw, 1.45rem);
    line-height: 1.2; text-wrap: balance;
  }
  .prix {
    flex: none; font-family: var(--rond); font-weight: 700; font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--creme); background: var(--bleu);
    padding: .18rem .6rem; border-radius: 999px;
  }
  .prix.nc {
    background: transparent; color: var(--sourd);
    font-size: .78rem; padding: 0;
  }

  /* la prose de la carte : c'est elle qui donne faim */
  .prose {
    margin: .5rem 0 0; font-size: 1.06rem; line-height: 1.5;
    color: #4a4036; max-width: 34rem; text-wrap: pretty;
  }

  .chez {
    margin-top: .7rem; display: flex; flex-wrap: wrap;
    align-items: center; gap: .3rem .6rem;
    font-family: var(--rond); font-size: .78rem; color: var(--sourd);
  }
  .chez .qui { color: var(--encre); font-weight: 700; }
  .chez .pt { opacity: .45; }
  .chez a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .chez a:hover { color: var(--nappe); }

  /* la pastille du plat du jour */
  .tache {
    display: inline-block; margin-bottom: .5rem;
    font-family: var(--rond); font-weight: 700; font-size: .68rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--creme);
    padding: .28rem .75rem;
    border-radius: 999px;
    background: var(--nappe);
  }

  .vide {
    padding: 1.5rem 0; color: var(--sourd); max-width: 30rem;
    text-wrap: pretty;
  }
  .vide b { color: var(--encre); font-weight: 400; }

  footer {
    margin: 1.6rem auto 0; max-width: 52rem; padding: 0 1rem;
    font-family: var(--rond); font-size: .74rem; line-height: 1.7;
    color: #6d5c4a; text-align: center;
  }
  footer b { color: var(--encre); font-weight: 700; }

  :focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  /* ---------- le bas de nappe ---------- */
  .liens {
    margin-top: .9rem; display: flex; flex-wrap: wrap;
    justify-content: center; gap: .35rem .9rem;
  }
  .liens a { color: #6d5c4a; text-decoration: underline; text-underline-offset: 2px; }
  .liens a:hover { color: var(--nappe); }

/* ============================================================
   PAGES PLAT × VILLE

   Elles répondent à une question posée dans un moteur de recherche.
   Le titre reprend donc la question telle qu'elle se tape, et la
   réponse tient dans la première phrase — avant même de faire défiler.
   ============================================================ */

.fil {
  margin: 0 0 1.4rem; font-family: var(--rond); font-size: .74rem;
  color: var(--sourd); display: flex; flex-wrap: wrap; gap: .4rem;
}
.fil a { color: var(--sourd); text-decoration: none; }
.fil a:hover { color: var(--nappe); text-decoration: underline; }
.fil .sep { opacity: .45; }

.chapeau {
  margin: 0 0 1.8rem; font-size: 1.12rem; max-width: 34rem;
  text-wrap: pretty;
}
.chapeau b { color: var(--nappe); font-weight: 400; font-style: italic; }

.voisins {
  margin-top: 1.6rem; padding: 1.4rem clamp(1.6rem, 4.5vw, 3rem);
  background: var(--creme); border-radius: 22px;
  box-shadow: 0 14px 40px -22px rgba(34, 29, 24, .5);
}
.voisins h2 {
  margin: 0 0 .7rem; font-family: var(--rond); font-weight: 700;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sourd);
}
.voisins .props .prop { animation: none; }

.retour {
  display: inline-block; margin-top: 1.6rem;
  font-family: var(--rond); font-size: .82rem; font-weight: 700;
  color: var(--bleu); text-decoration: none;
  border: 2px solid var(--filet); border-radius: 999px;
  padding: .34rem 1rem; transition: border-color .15s;
}
.retour:hover { border-color: var(--bleu); }

/* Les propositions sont des liens vers les pages plat × ville : un moteur
   doit pouvoir les suivre. Le JavaScript intercepte le clic pour afficher
   les résultats sans navigation, mais l'URL existe et reste explorable. */
a.prop { text-decoration: none; color: var(--encre); }