/* ==========================================================================
   Sushi Parisien — feuille de style unique
   Mobile-first. Toutes les valeurs réglables sont dans :root.
   ========================================================================== */

:root {
  /* Couleurs. Celles qu'on utilise aussi en transparence existent en
     composantes R, G, B (--*-rgb) : rgba(var(--gold-rgb), 0.3). */
  --bg-rgb: 11, 11, 12;
  --bg-elev-rgb: 21, 21, 23;
  --gold-rgb: 200, 165, 91;
  --gold-soft-rgb: 224, 201, 138;
  --green-rgb: 111, 191, 139;
  --red-rgb: 217, 112, 95;

  --bg: rgb(var(--bg-rgb));
  --bg-elev: rgb(var(--bg-elev-rgb));
  --bg-elev-2: #1d1d20;
  --line: #2a2a2f;
  --line-gold: rgba(var(--gold-rgb), 0.3);
  --text: #f2efe9;
  --text-muted: #a39d94;
  --ink: #14140f; /* texte posé sur l'or */
  --gold: rgb(var(--gold-rgb));
  --gold-soft: rgb(var(--gold-soft-rgb));
  --gold-deep: #a9792f;
  --green: rgb(var(--green-rgb));
  --red: rgb(var(--red-rgb));

  /* Or « métal » : même dégradé que le logo. */
  --gold-metal: linear-gradient(180deg, #f7e4a8 0%, #d8b062 45%, var(--gold-deep) 80%, #e3c077 100%);
  --gold-button: linear-gradient(135deg, #ecd394 0%, var(--gold) 48%, var(--gold-deep) 100%);

  /* Typographie */
  --font-caps: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-script: "Parisienne", "Cormorant Garamond", Georgia, cursive;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Rythme */
  --gutter: 20px;
  --max-width: 1120px;
  --radius: 14px;
  --radius-sm: 8px;
  --section-y: clamp(64px, 11vw, 120px);
  --header-h: calc(64px + env(safe-area-inset-top, 0px));

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Flash bleu au toucher sur iOS : on le remplace par nos propres états. */
  -webkit-tap-highlight-color: transparent;

  /* Garde-fou : aucun défilement horizontal, quel que soit le contenu. */
  overflow-x: hidden;
}

/* Adresses et e-mails longs ne doivent jamais élargir leur conteneur. */
a,
p,
li {
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.01em;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Utilitaires ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  /* max() : sur iPhone à encoche en paysage, la zone sûre dépasse la gouttière. */
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

/* Titres de section en capitales Cinzel, comme sur l'affiche. */
.section-title {
  font-family: var(--font-caps);
  font-weight: 500;
  font-size: clamp(1.6rem, 6vw, 2.5rem);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Texte doré métallisé (repli : or uni si background-clip n'est pas géré). */
.hero-motto,
.hero-script,
.script-title,
.section-title,
.cta-script {
  color: var(--gold-soft);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-motto,
  .hero-script,
  .script-title,
  .section-title,
  .cta-script {
    background: var(--gold-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Filet orné : trait qui s'efface aux extrémités, losange au centre. */
.ornament {
  position: relative;
  width: min(340px, 72%);
  height: 10px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent)
    center / 100% 1px no-repeat;
}

.ornament::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--gold-soft);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 4px var(--bg);
}

/* Variante alignée à gauche (colonnes de texte). */
.ornament--start {
  margin-left: 0;
  background-image: linear-gradient(90deg, var(--gold), var(--gold) 70%, transparent);
}

.ornament--start::after {
  left: 38%;
}

/* --- Apparitions ---------------------------------------------------------
   Masqué seulement si le JS tourne (.js posé dans le <head>) : sans JS,
   tout est visible. --d : délai propre à chaque élément. */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out) var(--d, 0s),
    transform 0.9s var(--ease-out) var(--d, 0s);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero : visible dès le chargement, pas besoin d'attendre le défilement. */
.js .hero-in {
  animation: sp-rise 0.9s var(--ease-out) var(--d, 0s) both;
}

/* --- En-tête -------------------------------------------------------------- */

/* Pas de logo dans l'en-tête : le grand logo du hero suffit. Collé en haut,
   verre dépoli pour rester lisible au-dessus des photos. Tout en haut de
   page il est transparent et flotte sur le hero ; js/reveal.js pose
   .is-scrolled dès qu'on défile. Sans JS, il reste opaque. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(var(--bg-rgb), 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.14);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.js .site-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 64px;
}

/* Lien « La carte » : même hauteur de pastille que le sélecteur de langue. */
.carte {
  padding: 6px 16px;
  border: 1px solid rgba(var(--gold-rgb), 0.55);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

@media (hover: hover) {
  .carte:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
  }
}

.carte:active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* Sélecteur de langue */
.lang {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.lang a {
  padding: 6px 13px;
  color: var(--text-muted);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

@media (hover: hover) {
  .lang a:hover {
    color: var(--text);
  }
}

.lang a:active {
  color: var(--text);
}

.lang a[aria-current="true"] {
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
}

/* --- Hero ----------------------------------------------------------------- */

/* Composition de l'affiche : logo, devise et engagements à gauche, rolls
   à droite et en bas. Mobile : texte centré en haut, photo en dessous.

   .hero-art est un conteneur de requête (container-type: size) : l'image
   carrée y mesure 100cqh de côté, et la devise manuscrite est placée en
   cqh pour tomber toujours dans la zone effacée de l'affiche (≈ 71–99 %
   en largeur, 77–93 % en hauteur de l'image), quelle que soit la taille. */
.hero {
  position: relative;
  overflow: hidden;
  /* Passe sous l'en-tête transparent. */
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  text-align: center;
  /* Fond uni, exactement la couleur des zones effacées de la photo : un
     halo ici ferait apparaître le bord gauche de l'image. */
  background: var(--bg);
  /* Largeur du logo, partagée avec le sélecteur de variante (centré sous
     le logo, même quand le logo est calé à gauche sur grand écran).
     Mobile : plus petit, pour que les rolls apparaissent dès le premier écran. */
  --logo-w: min(54vw, 240px);
}

.hero-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 1;
  container-type: size;
}

.hero-art-img,
.hero-art::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 100cqh;
  height: 100cqh;
  max-width: none;
}

.hero-art-img {
  object-fit: cover;
}

/* Fondus vers le noir : haut (sous le texte) et bas (section suivante). */
.hero-art::before {
  content: "";
  z-index: 1;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(var(--bg-rgb), 0.55) 22%, transparent 42%),
    linear-gradient(0deg, var(--bg) 0%, transparent 14%);
}

.hero-script {
  position: absolute;
  z-index: 2;
  right: 3cqh;
  bottom: 5cqh;
  margin: 0;
  font-family: var(--font-script);
  font-size: 7.4cqh;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-8deg);
  padding: 0 0.15em 0.1em;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}

/* Trait de plume sous la devise. */
.hero-script::after {
  content: "";
  display: block;
  height: 1px;
  margin: 0.12em 0 0 18%;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 30%, var(--gold));
}

.hero-inner {
  position: relative;
  z-index: 2;
  /* Laisse la photo apparaître sous le texte (carré de la largeur de l'écran). */
  padding-block: 8px calc(100vw * 0.62);
}

.hero .sp-mark,
.hero .logo-switch {
  width: var(--logo-w);
  margin-inline: auto;
}

/* Mobile : boutons côte à côte, pour que les rolls apparaissent dès le
   premier écran. */
@media (min-width: 340px) {
  .hero .actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hero .btn {
    padding-inline: 10px;
    font-size: 0.86rem;
    letter-spacing: 0.08em;
  }
}

.hero-motto {
  margin: 22px auto 0;
  font-family: var(--font-caps);
  font-weight: 500;
  font-size: clamp(1.05rem, 4.4vw, 1.75rem);
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Engagements : en ligne sur mobile (icône au-dessus du libellé),
   en colonne sur grand écran comme sur l'affiche. */
.hero-values {
  list-style: none;
  padding: 0;
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 420px;
}

.hero-values li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-caps);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  color: #eadcb8;
}

/* Médaillon : double cercle doré, comme sur l'affiche. */
.value-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(var(--bg-rgb), 0.5);
  box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px rgba(var(--gold-rgb), 0.35),
    0 0 24px -6px rgba(var(--gold-rgb), 0.45);
  color: var(--gold-soft);
}

.value-ico svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero .actions {
  margin-top: 24px;
}

/* Le bouton secondaire peut passer sur la photo : fond plus dense et flou
   pour que le texte reste net au-dessus des rolls. */
.hero .btn:not(.btn--primary) {
  background: rgba(var(--bg-rgb), 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Décor du hero : uniquement en mise en page « affiche » (voir ci-dessous). */
.hero-deco {
  display: none;
}

/* Grand écran paysage : l'affiche. Image carrée calée à droite sur toute la
   hauteur, texte à gauche sur la partie sombre. Réservé au paysage (5/4) :
   sur une tablette en portrait, le carré couvrirait tout l'écran et le
   texte tomberait sur les rolls. Hauteur plafonnée pour la même raison. */
@media (min-width: 960px) and (min-aspect-ratio: 5/4) {
  .hero {
    display: flex;
    align-items: center;
    min-height: clamp(680px, 100svh, 1000px);
    text-align: left;
    --logo-w: clamp(220px, 31vh, 310px);
  }

  .hero-art {
    top: 0;
    aspect-ratio: auto;
  }

  /* Photo calée sur le bord droit de l'écran : carrée (100cqh) sur écran
     16:10, plus large sur écran large (66 % de la largeur, recadrée en
     hauteur, plafonnée à 1,5 × la hauteur) — les rolls remplissent le
     centre au lieu d'un vide noir. Le texte, lui, reste dans la colonne
     centrale (.wrap) comme le reste de la page. */
  .hero-art-img,
  .hero-art::before {
    width: clamp(100cqh, 66cqw, 150cqh);
  }

  .hero-art-img {
    object-position: 62% 58%;
  }

  .hero-art::before {
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(var(--bg-rgb), 0.7) 18%, transparent 46%),
      linear-gradient(0deg, var(--bg) 0%, transparent 14%),
      linear-gradient(180deg, rgba(var(--bg-rgb), 0.7) 0%, transparent 16%),
      radial-gradient(ellipse 34% 30% at 100% 100%, rgba(var(--bg-rgb), 0.85), transparent 75%);
  }

  /* Décor tiré des affiches (affiché plus bas, sur très grand écran). Pas
     de veines d'or derrière le logo : le propriétaire ne les veut pas. */
  .hero-deco {
    position: absolute;
    z-index: 1;
    height: auto;
    max-width: none;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .hero-script {
    right: 2cqh;
    bottom: 7cqh;
    font-size: 4.6cqh;
  }

  .hero-inner {
    padding-block: 32px 56px;
  }

  .hero-inner > * {
    max-width: 540px;
  }

  .hero .logo-switch {
    margin-left: 0;
  }

  .hero .sp-mark {
    margin-inline: 0;
  }

  .hero-motto {
    margin-left: 0;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  }

  .hero .ornament {
    margin-left: 0;
    width: 420px;
    background-image: linear-gradient(90deg, var(--gold), var(--gold) 75%, transparent);
  }

  .hero .ornament::after {
    left: 42%;
  }

  .hero-values {
    grid-template-columns: none;
    gap: 14px;
    margin-left: 0;
  }

  .hero-values li {
    flex-direction: row;
    gap: 18px;
    font-size: 0.86rem;
    letter-spacing: 0.12em;
  }

  .hero .actions {
    margin-left: 0;
    max-width: 480px;
  }
}

/* Grand écran : la composition grandit avec lui. */
@media (min-width: 1780px) and (min-aspect-ratio: 5/4) {
  .hero {
    --logo-w: clamp(260px, 33vh, 360px);
  }

  .hero-inner > * {
    max-width: 620px;
  }

  .hero-motto {
    font-size: clamp(1.85rem, 1.6vw, 2.3rem);
  }

  .hero .ornament {
    width: 480px;
  }

  .hero-values {
    gap: 16px;
  }

  .hero-values li {
    font-size: 0.95rem;
  }

  .hero-values .value-ico {
    width: 58px;
    height: 58px;
  }

  .hero .actions {
    max-width: 540px;
  }

  .hero .btn {
    min-height: 70px;
    font-size: 0.95rem;
  }
}

/* Marge gauche assez large pour une branche de cerisier (en bas à gauche,
   collée au bord de l'écran). À droite il y a la photo : pas de branche. */
@media (min-width: 1700px) and (min-aspect-ratio: 5/4) {
  .hero-deco--blossom {
    display: block;
    left: 0;
    bottom: 6%;
    width: auto;
    height: 30%;
    opacity: 0.9;
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0 50%, #000 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 100% 100% at 0 50%, #000 60%, transparent 100%);
  }
}

/* Portables à écran bas (1366×768…) : tout doit tenir au-dessus de la
   ligne de flottaison, boutons compris. */
@media (min-width: 960px) and (min-aspect-ratio: 5/4) and (max-height: 840px) {
  .hero-inner {
    padding-block: 12px 32px;
  }

  .hero {
    --logo-w: clamp(170px, 26vh, 240px);
  }

  .hero-motto {
    margin-top: 16px;
  }

  .hero .ornament {
    margin-top: 14px;
  }

  .hero-values {
    gap: 8px;
    margin-top: 18px;
  }

  .hero-values .value-ico {
    width: 44px;
    height: 44px;
  }

  .hero .actions {
    margin-top: 20px;
  }
}

/* --- Logo animé (SVG en ligne dans le h1) --------------------------------
   Le h1 ne contient que le logo ; son <title> est lu par Google et les
   lecteurs d'écran.

   Le rendu final est l'image originale (img/logo-rond.jpg), à l'identique.
   L'animation : une esquisse vectorielle calée sur l'image (.sp-draft :
   anneau, emblème, contours des lettres, filet, devise) se dessine, puis
   l'image se « remplit » depuis le centre (masque #sp-reveal) pendant que
   l'esquisse s'efface ; un reflet passe enfin sur l'or.

   Les états de départ n'existent que dans les keyframes
   (animation-fill-mode: both) : sans .is-playing (pas de JS, mouvement
   réduit), seule l'image complète est visible.

   Largeur et centrage : voir --logo-w dans la section Hero. */

.sp-mark {
  display: block;
  height: auto;
  overflow: visible;
}

/* En attente des polices (js/logo.js) : rien à l'écran plutôt qu'un
   logo en police de secours qui changerait de forme. */
.js .sp-mark:not(.is-playing) {
  visibility: hidden;
}

.sp-caps {
  font-family: "Cinzel", var(--font-display);
  font-weight: 500;
  text-anchor: middle;
}

.sp-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  text-anchor: middle;
}

.sp-ring,
.sp-rule-line {
  stroke-dasharray: 1; /* pathLength="1" : un tiret = tout le tracé */
}

.sp-rule-line {
  fill: none;
  stroke: #d6ae62;
  stroke-width: 2.4;
}

.sp-rule-tip {
  fill: #d6ae62;
}

.sp-core,
.sp-dot,
.sp-tagline,
.sp-reveal-disc {
  transform-box: fill-box;
  transform-origin: center;
}

/* Variantes du logo : une seule visible (.is-active), fondu entre deux.
   Chaque variante rejoue toute l'animation quand js/logo.js lui remet
   .is-playing. */
/* display: none : les variantes cachées ne sont pas peintes du tout.
   Pas de transition CSS ici : un fondu d'opacité sur ces groupes masqués
   restait bloqué dans Chrome et figeait les animations de la variante
   suivante. L'entrée de chaque variante, c'est sa propre animation. */
.sp-logo {
  display: none;
}

.sp-logo.is-active {
  display: inline;
}

/* Sélecteur de variante sous le logo (affiché par js/logo.js). */
.logo-switch {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.logo-switch[hidden] {
  display: none;
}

.logo-switch button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.logo-switch button[aria-pressed="true"] {
  background: var(--gold);
  transform: scale(1.2);
}

/* Cible tactile : zone sensible élargie sans changer l'apparence. */
@media (pointer: coarse) {
  .logo-switch {
    gap: 0;
  }

  .logo-switch button {
    width: 30px;
    height: 30px;
    border: 0;
    background: radial-gradient(circle, var(--gold) 0 4px, transparent 5px);
    opacity: 0.45;
  }

  .logo-switch button[aria-pressed="true"] {
    background: radial-gradient(circle, var(--gold) 0 5px, transparent 6px);
    opacity: 1;
    transform: none;
  }
}

/* Esquisse : invisible au repos, n'existe que pendant l'animation. */
.sp-draft {
  opacity: 0;
}

.sp-sheen {
  opacity: 0;
}

/* Chronologie (s), ≈ 3,7 s au total : anneau 0,05 → emblème 0,5 →
   lettres 0,8 → filet 1,4 → devise 1,6 → remplissage 1,6–2,5 (esquisse
   effacée 2,0–2,5) → reflet 2,6. */
.sp-logo.is-playing .sp-draft {
  animation: sp-draft-out 0.5s var(--ease) 2s both;
}

.sp-reveal-mask.is-playing .sp-reveal-disc {
  animation: sp-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.6s both;
}

.sp-logo.is-playing .sp-ring {
  animation: sp-draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.05s both;
}

.sp-logo.is-playing .sp-ring--thin {
  animation-delay: 0.2s;
}

.sp-logo.is-playing .sp-core {
  animation: sp-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

.sp-logo.is-playing .sp-dot {
  animation: sp-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)
    calc(0.6s + var(--i) * 45ms) both;
}

.sp-logo.is-playing .sp-word {
  stroke-dasharray: 1200;
  animation: sp-trace 1.1s var(--ease) 0.8s both;
}

.sp-logo.is-playing .sp-word--2 {
  animation-delay: 0.95s;
}

.sp-logo.is-playing .sp-rule-line {
  animation: sp-draw 0.5s var(--ease) 1.4s both;
}

.sp-logo.is-playing .sp-rule-tip {
  animation: sp-fade 0.3s var(--ease) 1.8s both;
}

.sp-logo.is-playing .sp-tagline {
  animation: sp-rise 0.5s var(--ease) 1.6s both;
}

.sp-logo.is-playing .sp-sheen {
  animation: sp-sheen 1.1s cubic-bezier(0.4, 0, 0.2, 1) 2.6s;
}

@keyframes sp-fade {
  from {
    opacity: 0;
  }
}

@keyframes sp-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sp-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }
}

/* Contour des lettres tracé à la plume ; le remplissage vient de l'image. */
@keyframes sp-trace {
  from {
    stroke-dashoffset: 1200;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sp-grow {
  from {
    transform: scale(0);
  }
}

@keyframes sp-draft-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes sp-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes sp-sheen {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 1;
    transform: translateX(1650px);
  }
}

/* --- Boutons -------------------------------------------------------------- */

.actions {
  display: grid;
  gap: 12px;
  max-width: 640px;
  margin: 36px auto 0;
}

@media (min-width: 620px) {
  .actions {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

.btn {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 62px;
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line-gold);
  background: rgba(var(--bg-elev-rgb), 0.7);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease),
    background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.btn small {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--text-muted);
}

/* Reflet qui traverse le bouton au survol. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 248, 225, 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}

/* hover: hover — sur un écran tactile, l'état survolé reste « collé » après
   le tap. On réserve donc l'effet aux appareils dotés d'un vrai pointeur. */
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    background: var(--bg-elev-2);
  }

  .btn:hover::after {
    transform: translateX(120%);
  }
}

.btn:active {
  transform: translateY(0);
  border-color: var(--gold);
  background: var(--bg-elev-2);
}

/* Bouton mis en avant : or brossé */
.btn--primary {
  background: var(--gold-button);
  border-color: transparent;
  color: var(--ink);
  box-shadow: 0 10px 30px -12px rgba(var(--gold-rgb), 0.55);
}

.btn--primary small {
  color: rgba(20, 20, 15, 0.72);
}

@media (hover: hover) {
  .btn--primary:hover {
    background: var(--gold-button);
    border-color: transparent;
    box-shadow: 0 16px 36px -12px rgba(var(--gold-rgb), 0.7);
  }
}

.btn--primary:active {
  background: var(--gold-button);
  border-color: transparent;
}

.btn--inline {
  display: inline-flex;
  min-height: 54px;
  padding-inline: 30px;
}

/* --- Photos encadrées (galerie, maison) ----------------------------------- */

.g,
.frame-media {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elev);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

.g img,
.frame-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

/* Filet doré intérieur, façon cadre de galerie. */
.g::after,
.frame-media::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(var(--gold-soft-rgb), 0.4);
  border-radius: calc(var(--radius) - 5px);
  pointer-events: none;
  transition: border-color 0.4s var(--ease), inset 0.4s var(--ease);
}

@media (hover: hover) {
  .g:hover img,
  .frame-media:hover img {
    transform: scale(1.05);
  }

  .g:hover::after {
    inset: 12px;
    border-color: rgba(var(--gold-soft-rgb), 0.75);
  }
}

/* --- L'art du sushi (galerie) --------------------------------------------- */

.art {
  padding-block: var(--section-y);
}

.section-head {
  max-width: 640px;
  margin: 0 auto clamp(36px, 6vw, 60px);
  text-align: center;
}

.section-head .ornament {
  margin-top: 18px;
}

.section-sub {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  line-height: 1.4;
  color: #e2cf9f;
}

/* Mosaïque. Mobile : 2 colonnes ; grand écran : 3 colonnes. Les lettres
   a–f correspondent aux classes .g--a … .g--f du HTML. */
.gallery {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 44vw;
  grid-template-areas:
    "a b"
    "a c"
    "e e"
    "d f";
}

@media (min-width: 760px) {
  .gallery {
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(200px, 22vw, 290px);
    grid-template-areas:
      "a b b"
      "a c d"
      "e e f";
  }
}

.g--a { grid-area: a; }
.g--b { grid-area: b; }
.g--c { grid-area: c; }
.g--d { grid-area: d; }
.g--e { grid-area: e; }
.g--f { grid-area: f; }

/* --- La maison ------------------------------------------------------------ */

.maison {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(var(--gold-rgb), 0.07), transparent 70%);
}

.maison-grid {
  display: grid;
  gap: 36px;
  align-items: center;
}

@media (min-width: 880px) {
  .maison-grid {
    grid-template-columns: 5fr 6fr;
    gap: 80px;
  }
}

/* Photo très verticale : on garde l'enseigne et l'assiette. */
.maison-media {
  aspect-ratio: 4 / 5;
}

.maison-media img {
  object-position: 50% 42%;
}

@media (min-width: 880px) {
  .maison-media {
    aspect-ratio: 9 / 14;
  }
}

.script-title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.6rem, 10vw, 4.2rem);
  line-height: 1.15;
  text-wrap: balance;
  /* Les jambages du manuscrit débordent : sans marge, background-clip
     les rogne. */
  padding: 0 0.12em 0.08em 0;
}

.maison-text .ornament {
  margin-top: 18px;
}

.maison-text p {
  max-width: 46ch;
  margin: 22px 0 0;
  color: var(--text-muted);
  font-size: 1.02rem;
}

.maison-text .trio {
  margin: 18px 0 30px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--gold-soft);
}

/* --- Commander ------------------------------------------------------------ */

.order {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(var(--gold-rgb), 0.06), transparent 70%);
}

.order-grid {
  display: grid;
  gap: 36px;
}

@media (min-width: 900px) {
  .order-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 72px;
    align-items: start;
  }

  .order-intro {
    position: sticky;
    top: 104px;
  }
}

.lead {
  margin: 12px 0 26px;
  color: var(--text-muted);
  font-size: 1.02rem;
}

.order-actions {
  display: grid;
  gap: 12px;
  max-width: 380px;
  margin-top: 30px;
}

.card {
  background: linear-gradient(180deg, var(--bg-elev), rgba(var(--bg-elev-rgb), 0.85));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 5vw, 32px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);

  /* Un élément de grille refuse par défaut de devenir plus étroit que son
     contenu (min-width: auto). Sans cette ligne, le tableau des horaires peut
     élargir la carte au-delà de l'écran sur un petit téléphone. */
  min-width: 0;
}

.card h3 {
  font-size: 1.5rem;
  margin-bottom: 14px;
}

/* --- Badge ouvert / fermé ------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  color: var(--text-muted);
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.status[data-state="open"] {
  color: var(--green);
  border-color: rgba(var(--green-rgb), 0.32);
  background: rgba(var(--green-rgb), 0.08);
}

/* Point qui « respire » quand c'est ouvert. */
.status[data-state="open"]::before {
  animation: pulse 2s var(--ease) infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0.55);
  }
  60% {
    box-shadow: 0 0 0 6px rgba(var(--green-rgb), 0);
  }
}

.status[data-state="closed"] {
  color: var(--red);
  border-color: rgba(var(--red-rgb), 0.32);
  background: rgba(var(--red-rgb), 0.08);
}

/* Masqué tant que le JS n'a pas calculé l'état */
.status[hidden] {
  display: none !important;
}

/* --- Tableau des horaires ------------------------------------------------- */

.hours {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin-bottom: 18px;
}

.hours th,
.hours td {
  padding: 7px 0;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.hours tr:last-child th,
.hours tr:last-child td {
  border-bottom: 0;
}

.hours th {
  white-space: nowrap;
  padding-right: 14px;
}

.hours td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Plages horaires : séparées par un point médian en largeur confortable,
   empilées l'une sous l'autre dès que la place manque. Le point séparateur
   est généré en CSS, jamais laissé orphelin en fin de ligne. */
.hours .slot {
  display: inline-block;
  white-space: nowrap;
}

.hours .slot + .slot::before {
  content: "·";
  margin: 0 0.6em;
  color: var(--text-muted);
}

/* Format FR (« 9h30–15h », « 10h–14h30 ») : largeurs variables, la colonne
   serait en dents de scie. Début et fin ont une largeur fixe, alignés contre
   le tiret : les tirets tombent les uns sous les autres sur toutes les lignes.
   Le format EN (« 09:30–15:00 ») est déjà de largeur fixe, sans sous-balises. */
.hours .slot > span {
  display: inline-block;
  /* 5.1ch : largeur mesurée de « 14h30 », la plus longue forme possible. */
  min-width: 5.1ch;
}

.hours .slot > span:first-child {
  text-align: right;
}

.hours .slot > span:last-child {
  text-align: left;
}

/* 400px : deux plages sur une ligne demandent ~226px de cellule, atteints
   à 393px à un pixel près. Marge de sécurité pour les polices de secours. */
@media (max-width: 400px) {
  .hours .slot {
    display: block;
  }

  .hours .slot + .slot::before {
    content: none;
  }
}

/* Jour courant surligné */
.hours tr[data-today="true"] th,
.hours tr[data-today="true"] td {
  color: var(--gold);
}

.hours .closed-day {
  color: var(--text-muted);
  font-style: italic;
}

/* --- Bloc d'informations (adresse, téléphone) ----------------------------- */

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 0.95rem;
}

.info-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}

.info-list .ico {
  color: var(--gold);
  line-height: 1.5;
  text-align: center;
}

.info-list a {
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.35);
  transition: border-color 0.2s var(--ease);
}

@media (hover: hover) {
  .info-list a:hover {
    border-bottom-color: var(--gold);
  }
}

.info-list a:active {
  border-bottom-color: var(--gold);
}

/* Cible tactile : un lien texte fait ~24px de haut, sous le minimum
   recommandé de 44px. Le téléphone est le lien le plus utilisé de la page —
   on épaissit la zone sensible sans changer l'apparence. */
@media (pointer: coarse) {
  .info-list a,
  .site-footer a {
    display: inline-block;
    padding-block: 10px;
  }

  .info-list li {
    align-items: center;
  }

  .lang a {
    padding: 10px 15px;
  }

  .carte {
    padding: 10px 18px;
  }
}

/* Paliers de commande minimum : une ligne par distance, avec une barre dorée
   proportionnelle aux kilomètres (variable --km, sur une échelle de 10). */
.tiers-block {
  margin: 4px 0 0;
  padding: 18px 18px 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  border-radius: var(--radius-sm);
  background: linear-gradient(
    160deg,
    rgba(var(--gold-rgb), 0.09),
    rgba(var(--gold-rgb), 0.02) 60%
  );
}

.tiers-title {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.tiers {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.93rem;
}

.tiers li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 7px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.tiers li:last-child {
  border-bottom: 0;
}

.tier-km {
  color: var(--text-muted);
}

.tier-km b {
  color: var(--text);
  font-weight: 500;
}

/* Même police que les kilomètres (.tier-km b), seule la couleur change. */
.tiers .amount {
  color: var(--gold-soft);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Barre de distance, sur toute la largeur de la ligne */
.tiers li::after {
  content: "";
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--gold), var(--gold-soft))
      0 0 / calc(var(--km, 0) * 10%) 100% no-repeat,
    var(--line);
}

/* --- Appel final ---------------------------------------------------------- */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(96px, 18vw, 170px);
}

.cta-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photo assombrie, fondue dans le noir en haut et en bas. */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(var(--bg-rgb), 0.7) 28%, rgba(var(--bg-rgb), 0.7) 72%, var(--bg) 100%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(var(--bg-rgb), 0.35), rgba(var(--bg-rgb), 0.75));
}

.cta-script {
  margin: 0 0 6px;
  font-family: var(--font-script);
  font-size: clamp(2.2rem, 7vw, 3rem);
  line-height: 1.2;
  padding: 0 0.12em 0.08em;
}

/* --- Pied de page --------------------------------------------------------- */

/* Tout centré. Téléphone / e-mail et les deux liens de commande : en
   colonne sur mobile, en ligne sinon, séparés par un point doré avec la
   même marge des deux côtés. */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 48px max(44px, env(safe-area-inset-bottom, 0px));
  color: var(--text-muted);
  font-size: 0.86rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

.footer-brand {
  font-family: var(--font-caps);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.site-footer .footer-address {
  margin-top: 8px;
}

.footer-row {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

@media (min-width: 560px) {
  .footer-row {
    flex-direction: row;
    justify-content: center;
    gap: 0;
  }

  .footer-row li + li::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 18px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.7;
    vertical-align: middle;
  }
}

@media (hover: hover) {
  .site-footer a:hover {
    color: var(--text);
  }
}

.site-footer a {
  transition: color 0.2s var(--ease);
}

.site-footer a:active {
  color: var(--text);
}

.footer-legal {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
}

/* --- Préférences système -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  /* Logo et apparitions : directement dans l'état final, sans délais. */
  .sp-mark *,
  .js .hero-in {
    animation: none !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Impression : la page sert aussi de fiche contact */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  .actions,
  .order-actions,
  .lang,
  .carte,
  .cta,
  .hero-art,
  .art,
  .maison-media {
    display: none;
  }

  .site-header {
    position: static;
  }

  .card,
  .order {
    border-color: #ccc;
  }
}