/* ==========================================================================
   PILI PIZZA - COMPOSANTS
   En-tete, boutons, anneau de marque, onglets, cartes, pied de page.
   ========================================================================== */

/* Sentinelle de l'en-tete : doit avoir une aire non nulle pour que
   l'IntersectionObserver la rapporte correctement. */
.header-sentinel {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   EN-TETE
   Transparent sur le hero, fond plein au defilement.
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              backdrop-filter var(--dur) var(--ease-out);
}
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, hsl(354 20% 4% / 0.72), transparent);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.header.is-stuck {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}
.header.is-stuck::before { opacity: 0; }

.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex-shrink: 0; }
.brand img {
  width: auto;
  height: calc(var(--header-h) - 22px);
  transition: transform var(--dur) var(--ease-out);
}
.brand:hover img { transform: scale(1.05) rotate(-2deg); }

.nav { display: none; }
@media (min-width: 62rem) {
  .nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }
}
.nav a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-1);
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav a::after {
  content: '';
  position: absolute;
  left: var(--sp-1); right: var(--sp-1); bottom: 2px;
  height: 2px;
  background: var(--brand-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current='true']::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   BOUTONS
   Zone tactile 44 px minimum. Libelle sur une seule ligne au bureau.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand-primary);
  --btn-fg: var(--brand-on-primary);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: 0 var(--sp-6);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  max-width: 100%;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
/* Remplissage directionnel : le voile entre par le cote du curseur. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: hsl(0 0% 100% / 0.16);
  transform: translateX(var(--fill-from, -101%));
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn:hover { box-shadow: var(--sh-2); }
.btn:active { transform: translateY(1px) scale(0.985); }

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn--ghost::before { background: hsl(0 0% 100% / 0.09); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-muted); }

.paper .btn--ghost {
  --btn-fg: var(--paper-ink);
  box-shadow: inset 0 0 0 1.5px var(--paper-line);
}
.paper .btn--ghost::before { background: hsl(354 14% 10% / 0.07); }
.paper .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--paper-muted); }

.btn--lg { min-height: 56px; padding-inline: clamp(1.15rem, 4.5vw, 3rem); font-size: var(--fs-body); }

/* Bouton telephone permanent au mobile. */
.btn--phone-compact { padding-inline: var(--sp-4); }
.btn--phone-compact .btn__label { display: none; }
@media (min-width: 30rem) {
  .btn--phone-compact { padding-inline: var(--sp-5); }
  .btn--phone-compact .btn__label { display: inline; }
}

/* --------------------------------------------------------------------------
   ETAT D'OUVERTURE
   La pastille renforce une information portee par le texte, elle ne la
   remplace jamais : « Ouvert » et « Ouvre a 18h » se lisent sans la couleur.
   -------------------------------------------------------------------------- */
.statut {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body-l);
}
.statut__dot {
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background: var(--ink-faint);
  flex-shrink: 0;
  align-self: center;
}
.statut strong { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.statut__relais { font-size: var(--fs-small); color: var(--ink-muted); }
[data-statut-etat='ouvert'] .statut__dot,
[data-statut-etat='ouvert'] .dot { background: var(--eucalyptus); }
[data-statut-etat='ferme'] .statut__dot,
[data-statut-etat='ferme'] .dot { background: var(--brand-primary); }

/* --------------------------------------------------------------------------
   ANNEAU DE MARQUE
   Le logo est un anneau rouge ouvert. C'est le systeme graphique du site.
   -------------------------------------------------------------------------- */
.ring-mark {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}
.ring-mark__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-mark__svg circle {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 268 314;
  transform: rotate(-96deg);
  transform-origin: center;
}
.ring-mark__body { position: relative; text-align: center; }

.ring-text { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-text text {
  font-family: var(--font-display);
  font-size: 5.6px;
  font-weight: 600;
  text-transform: uppercase;
  fill: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   ONGLETS DE LA CARTE
   -------------------------------------------------------------------------- */
/* Sans JavaScript les onglets ne peuvent rien faire : on ne les montre pas,
   et les deux panneaux de la carte restent affiches. */
.tabs { display: none; }
.js .tabs {
  display: inline-flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-pill);
}
.tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--paper-muted);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--paper-ink); }
.tab[aria-selected='true'] {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}

/* --------------------------------------------------------------------------
   LIGNES DE CARTE
   -------------------------------------------------------------------------- */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--sp-8);
}
@media (min-width: 56rem) { .menu-grid { grid-template-columns: 1fr 1fr; } }

.menu-head {
  display: none;
  gap: var(--sp-4);
  padding: 0 0 var(--sp-2);
  border-bottom: 1.5px solid var(--paper-ink);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--paper-muted);
}
@media (min-width: 34rem) {
  .menu-head { display: grid; grid-template-columns: 1fr repeat(3, 4.4rem); }
  .menu-head span + span { text-align: right; }
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--paper-line);
}
@media (min-width: 34rem) {
  .menu-item { grid-template-columns: 1fr repeat(3, 4.6rem); align-items: baseline; }
  /* display:contents fait des trois prix de vrais enfants de la grille :
     sans cela ils s'empilent tous dans une seule cellule. */
  .menu-item__prices { display: contents; }
  .menu-item__name { grid-area: 1 / 1; }
  .menu-item__desc { grid-area: 2 / 1; }
  .menu-item__prices > .menu-item__price:nth-child(1) { grid-area: 1 / 2; }
  .menu-item__prices > .menu-item__price:nth-child(2) { grid-area: 1 / 3; }
  .menu-item__prices > .menu-item__price:nth-child(3) { grid-area: 1 / 4; }

  /* Carte du distributeur : taille unique, donc une seule colonne de prix. */
  .menu-grid--single .menu-item { grid-template-columns: 1fr auto; }
  .menu-grid--single .menu-item__prices > .menu-item__price:nth-child(1) { grid-area: 1 / 2; }
}
.menu-item__name {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.menu-item__desc {
  grid-column: 1;
  font-size: var(--fs-mention);
  line-height: 1.5;
  color: var(--paper-muted);
}
.menu-item__price {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--paper-ink);
}
@media (min-width: 34rem) { .menu-item__price { text-align: right; } }
@media (max-width: 33.999rem) {
  .menu-item__prices { display: flex; gap: var(--sp-4); margin-top: var(--sp-1); }
  .menu-item__price::before {
    content: attr(data-size);
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--paper-muted);
  }
}

.badge-new {
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   FAITS DE REASSURANCE
   -------------------------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 56rem) { .facts { grid-template-columns: repeat(4, 1fr); } }

.fact {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.fact:nth-child(2n) { border-right: 0; }
.fact:nth-last-child(-n + 2) { border-bottom: 0; }
@media (min-width: 56rem) {
  .fact { border-bottom: 0; border-right: 1px solid var(--line); padding-block: var(--sp-7); }
  .fact:nth-child(2n) { border-right: 1px solid var(--line); }
  .fact:last-child { border-right: 0; }
}
.fact__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: block;
}
.fact__value em { font-style: normal; color: var(--brand-primary); }
.fact__label {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-mention);
  color: var(--ink-muted);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   MEDIA
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-elevated);
}
.media picture { display: block; width: 100%; height: 100%; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--zoom img { transition: transform var(--dur-slow) var(--ease-out); }
.media--zoom:hover img { transform: scale(1.04); }

figure { margin: 0; }
figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-mention);
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   PIED DE PAGE
   -------------------------------------------------------------------------- */
.footer {
  background: var(--surface-sunken);
  border-top: 1px solid var(--line);
  padding-block: var(--sp-8) var(--sp-6);
}
.footer__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } }

.footer h4 {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
  margin-bottom: var(--sp-4);
}
.footer a { color: var(--ink-muted); text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }
/* Liens de navigation du pied de page : cible tactile confortable. */
.footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--sp-1);
}
.footer li + li { margin-top: var(--sp-1); }

.socials { display: flex; gap: var(--sp-3); }
.socials a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.socials a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.socials svg { width: 19px; height: 19px; }

.footer__bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-mention);
  color: var(--ink-faint);
}
/* Dans une phrase, un lien ne peut pas se distinguer par la seule couleur. */
.footer__bottom a { text-decoration: underline; text-underline-offset: 0.2em; }

/* --------------------------------------------------------------------------
   BARRE D'ACTION MOBILE
   Le telephone reste toujours atteignable.
   -------------------------------------------------------------------------- */
.actionbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface-sunken) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out);
}
.actionbar.is-visible { transform: translateY(0); }
.actionbar .btn { flex: 1; }
@media (min-width: 62rem) { .actionbar { display: none; } }

/* --------------------------------------------------------------------------
   PAGES LEGALES
   -------------------------------------------------------------------------- */
.legal { padding-top: calc(var(--header-h) + var(--sp-8)); padding-bottom: var(--sp-9); }
.legal h2 { font-size: var(--fs-display-m); margin-top: var(--sp-8); }
.legal h3 { font-size: var(--fs-display-s); margin-top: var(--sp-6); }
.legal p, .legal li { color: var(--ink-muted); max-width: var(--measure); }
.legal p { margin-top: var(--sp-4); }
.legal ul { margin-top: var(--sp-4); }
.legal li { padding-left: var(--sp-5); position: relative; }
.legal li + li { margin-top: var(--sp-2); }
.legal li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 1.5px;
  background: var(--brand-primary);
}
.legal a { color: var(--ink); }
/* Placeholder de donnee non confirmee. Doit rester lisible sur les deux surfaces. */
.todo {
  display: inline-block;
  background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  border: 1px dashed var(--brand-primary);
  color: var(--ink);
  padding: 1px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-mention);
  font-weight: 600;
}
.paper .todo {
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}