/* ============================================================
   So Sushi Vilvoorde — compléments à la charte
   Charte v2.0 (styles.css) + le strict nécessaire pour une page
   d'annonce d'ouverture. Rien ici ne redéfinit un token : tout
   dérive des variables posées par styles.css, pour qu'une mise à
   jour de la charte se propage sans retouche.
   ============================================================ */

/* ---------- Accessibilité ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* ---------- En-tête réduit ----------
   Sans menu, la barre n'a plus d'élément élastique au centre : c'est la marque
   qui pousse le sélecteur de langue à droite. Et contrairement au site
   complet, ce sélecteur reste visible sur mobile — il n'a aucun menu burger
   où se replier. */
.site-nav-slim .container{height:76px}
.site-nav-slim .brand{margin-right:auto}
.lang-switch{display:flex;align-items:center;gap:6px;font-family:var(--geo);
  font-size:11.5px;letter-spacing:.16em;font-weight:600}
.lang-switch > *{display:inline-block;padding:9px 10px;color:var(--muted-dark);
  transition:color .25s var(--ease)}
.lang-switch [aria-current="true"]{color:var(--gold)}
.lang-switch a:hover{color:var(--cream)}

/* ---------- Hero ----------
   La page n'a qu'une action : le formulaire doit tenir sous le titre sans
   défilement sur un téléphone courant. D'où une hauteur plafonnée plutôt
   qu'un 100vh, et un padding bas resserré. */
.home-hero{
  display:flex;align-items:center;
  min-height:clamp(580px,86vh,880px);
  padding-block:clamp(56px,8vw,96px)
}
/* Pastille « ouverture prochaine ». La charte de sushi-lasne.be ne porte plus
   de composant .badge : elle est donc définie ici de bout en bout, sur le
   gabarit d'origine (Jost, capitales espacées, contour d'accent). */
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--geo);text-transform:uppercase;letter-spacing:.14em;
  font-size:10.5px;font-weight:500;line-height:1;
  padding:8px 13px;border-radius:2px;
  color:var(--accent);border:1px solid currentColor
}
.opening-note{
  font-family:var(--geo);text-transform:uppercase;letter-spacing:.16em;
  font-size:11.5px;color:var(--accent);margin-top:20px
}

/* ---------- Formulaire d'inscription ----------
   Il vit sur le hero, donc sur fond sombre : les champs de la charte
   (.field) supposent un contexte .dark hérité d'un parent, celui-ci se
   suffit à lui-même. */
.notify{
  margin-top:clamp(28px,4vw,40px);max-width:560px;
  border-top:1px solid var(--hairline);padding-top:clamp(22px,3vw,30px)
}
.notify .notify-title{
  font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.6vw,27px);
  line-height:1.2;color:var(--cream)
}
.notify .p{font-size:14.5px;color:var(--muted-dark);margin-top:8px;max-width:52ch}

.notify-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.notify-row input{
  flex:1 1 260px;min-width:0;
  font-family:var(--body);font-size:15.5px;color:var(--cream);
  background:var(--ink-700);border:1px solid var(--ink-500);border-radius:3px;
  padding:15px 16px;transition:border-color .25s,box-shadow .25s
}
.notify-row input::placeholder{color:var(--muted-dim)}
.notify-row input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(239,231,214,.24)
}
.notify-row input[aria-invalid="true"]{border-color:var(--salmon)}
.notify-row input:disabled,.notify-row button:disabled{opacity:.6;cursor:default}
.notify-row .btn{flex:0 0 auto;padding-block:15px}

.notify-error{margin-top:12px;font-size:14px;color:var(--salmon)}
.notify-consent{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--muted-dim);max-width:56ch}
.notify-consent a{color:var(--muted-dark);border-bottom:1px solid currentColor}
.notify-consent a:hover{color:var(--accent)}

/* État de confirmation : même encombrement que le formulaire, pour que la
   page ne saute pas au moment où il est remplacé. */
.notify-done{border-left:2px solid var(--accent);border-top:0;padding:4px 0 4px 20px}
.notify-done .k{
  font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.8vw,28px);
  line-height:1.2;color:var(--cream)
}
.notify-done .p{margin-top:10px}

@media(max-width:520px){
  .notify-row .btn{width:100%;justify-content:center}
}

/* ---------- Bloc adresse ---------- */
.place{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:860px){.place{grid-template-columns:1fr}}

.media{overflow:hidden;background:var(--ink-700) center/cover}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.round{border-radius:var(--radius-lg)}
.place-shot{aspect-ratio:4/5;max-height:520px;margin:0}
@media(max-width:860px){.place-shot{aspect-ratio:16/10;max-height:none}}

/* NAP : liste de définitions plutôt qu'un paragraphe — l'étiquette et la
   valeur restent associées pour un lecteur d'écran comme pour un moteur. */
.nap{margin-top:clamp(24px,3vw,32px);display:grid;grid-template-columns:auto 1fr;
  gap:10px 22px;align-items:baseline}
.nap dt{
  font-family:var(--geo);text-transform:uppercase;letter-spacing:.14em;
  font-size:10.5px;color:var(--muted-dark);padding-top:2px
}
.nap dd{margin:0;font-size:15px;line-height:1.6;color:var(--cream)}
.nap dd a{border-bottom:1px solid var(--ink-500);transition:border-color .25s,color .25s}
.nap dd a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.nap dd .muted{font-size:13.5px}
@media(max-width:420px){.nap{grid-template-columns:1fr;gap:4px 0}.nap dt{margin-top:12px}}

/* ---------- Zone de livraison ----------
   La charte donne le gabarit des pastilles mais pose la marge intérieure sur
   un <a> : ici les communes ne sont pas des liens, il n'y a rien à cliquer.
   On rend donc la marge à l'élément lui-même, et on retire le survol, qui
   promettait une interaction inexistante. */
.area-list li{padding:9px 13px}
.area-list li:hover{border-color:var(--line-light);color:var(--muted-ctx)}
.dark .area-list li:hover{border-color:var(--ink-600)}

/* ---------- Liste d'attente (/admin) ----------
   Page interne : aucun effet du site public, juste un tableau qui se lit vite
   et se copie sans surprise. */
.waitlist{width:100%;border-collapse:collapse;margin-top:24px;font-size:14.5px}
.waitlist th{
  text-align:left;font-family:var(--geo);text-transform:uppercase;
  letter-spacing:.12em;font-size:10.5px;color:var(--muted);
  padding:0 16px 10px 0;border-bottom:1px solid var(--line-light);white-space:nowrap
}
.waitlist td{padding:11px 16px 11px 0;border-bottom:1px solid var(--line-light);vertical-align:top}
.waitlist td:first-child{word-break:break-all}
.waitlist td a{border-bottom:1px solid var(--line-light)}
.waitlist td a:hover{color:var(--accent-on-light);border-bottom-color:currentColor}
.waitlist tr:last-child td{border-bottom:0}
/* Sous 520px la colonne « inscrit le » passe à la trappe : l'adresse prime. */
@media(max-width:520px){
  .waitlist th:last-child,.waitlist td:last-child{display:none}
}

/* ---------- Pied de page ----------
   Trois colonnes ici, pas quatre : la grille de la charte en prévoit une de
   plus, qui resterait vide. */
.site-footer .footer-slim{grid-template-columns:1.4fr 1fr 1fr}
@media(max-width:820px){.site-footer .footer-slim{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.site-footer .footer-slim{grid-template-columns:1fr}}