:root {
  --creme:    #f6f1e9;
  --papier:   #fffdfa;
  --encre:    #33241b;
  --encre-mu: #7d6a5c;
  --brun:     #6f4425;
  --brun-cl:  #9a6a41;
  --filet:    #e4dacb;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font: 400 16px/1.6 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
        "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow-x: hidden;
}

/* ── betite barrière pour ma boutique de café artisanale */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  /* Le JPEG d'abord, pour les navigateurs qui ne connaissent ni le WebP ni
     image-set ; ceux qui connaissent les deux ne chargent que le WebP, plus
     léger de 115 Ko. */
  background: url('grains.jpg') center / cover no-repeat;
  background-image: image-set(url('grains.webp') type('image/webp'),
                              url('grains.jpg')  type('image/jpeg'));
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: .085;
  filter: saturate(.7);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 38%,
              rgba(246, 241, 233, .25) 0%,
              rgba(246, 241, 233, .78) 62%,
              rgba(246, 241, 233, .95) 100%);
}

.devanture, .plateau, .pied { position: relative; z-index: 1; }

/* ── l'enseigne, en haut à gauche ── */

.devanture { padding: 34px 40px 0; }
.enseigne { display: inline-block; }
.enseigne img {
  display: block; width: 188px; height: auto;
  opacity: .88;
}
.enseigne .baseline {
  display: block; margin-top: 7px;
  font: 400 10.5px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .34em; text-transform: uppercase; color: var(--encre-mu);
}

/* ── le plateau central ── */

.plateau { display: grid; place-items: center; padding: 30px 24px 40px; }

.comptoir {
  width: min(430px, 100%);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 44px 42px 38px;
  box-shadow: 0 1px 2px rgba(51, 36, 27, .04),
              0 18px 44px -22px rgba(51, 36, 27, .28);
}

.grain {
  display: block; width: 26px; height: auto; margin: 0 0 22px;
  opacity: .5;
}

h1 {
  margin: 0 0 10px;
  font: 400 27px/1.25 inherit;
  letter-spacing: -.005em;
}

p.chapeau {
  margin: 0 0 30px;
  font-size: 15px; line-height: 1.62; color: var(--encre-mu);
}

/* ── le formulaire ── */

label.ligne { display: block; margin: 0 0 20px; }

.intitule {
  display: block; margin: 0 0 9px;
  font: 500 11px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .16em; text-transform: uppercase; color: var(--encre-mu);
}

input[type=password] {
  display: block; width: 100%;
  background: #fff; color: var(--encre);
  border: 1px solid var(--filet); border-radius: 3px;
  padding: 13px 14px;
  font: 400 16px/1.2 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .06em;
  transition: border-color .16s, box-shadow .16s;
}
input[type=password]:focus {
  outline: none;
  border-color: var(--brun-cl);
  box-shadow: 0 0 0 3px rgba(154, 106, 65, .14);
}

button {
  display: block; width: 100%;
  padding: 14px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--brun); color: #fdf8f2;
  font: 500 12.5px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .18em; text-transform: uppercase;
  transition: background .16s;
}
button:hover { background: #5c3720; }
button:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* ── le message d'erreur, sobre ── */

.avis {
  margin: 0 0 22px; padding: 12px 14px;
  border-left: 3px solid #b4573f; border-radius: 0 3px 3px 0;
  background: rgba(180, 87, 63, .07);
  font-size: 14.5px; line-height: 1.5; color: #8d4331;
}

.mention {
  margin: 26px 0 0; padding-top: 20px;
  border-top: 1px solid var(--filet);
  font-size: 13px; line-height: 1.6; color: var(--encre-mu);
}

/* ── le pied de page ── */

.pied {
  padding: 0 40px 28px; text-align: center;
  font: 400 12px/1.7 "Helvetica Neue", Arial, sans-serif;
  color: color-mix(in srgb, var(--encre-mu) 72%, transparent);
}
.pied span { margin: 0 10px; }

@media (max-width: 560px) {
  .devanture { padding: 26px 24px 0; }
  .enseigne img { width: 150px; }
  .comptoir { padding: 34px 26px 30px; }
  h1 { font-size: 23px; }
  .pied { padding: 0 24px 22px; }
  /* Une ligne par mention, sans les points de séparation orphelins. */
  .pied span { display: block; margin: 2px 0; }
  .pied span:nth-child(even) { display: none; }
}