/* ==========================================================================
   MÉRA — Composants globaux
   Uniquement les éléments récurrents des maquettes validées.
   Base = mobile ; overrides par breakpoint dans responsive.css.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-ivory);
  color: var(--color-black);
  /* Pas de filet visible sous le header (maquettes) : la bordure de 1px est
     conservée transparente, la hauteur du header et le calcul des heroes
     plein écran (100svh - header - filet) en dépendent. */
  border-bottom: var(--rule-width) solid transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-height);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Filet court après le logo (maquettes Carte / Maison / Réserver / Journal) */
.site-header__rule {
  display: none;
  width: var(--rule-short);
  height: var(--rule-width);
  background-color: currentColor;
}

/* Indicateur de langue (maquettes : « • FR »). Pas de sélecteur à ce stade. */
.site-header__lang {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

.site-header__lang::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%; /* pastille fonctionnelle des maquettes */
  background-color: var(--color-cobalt);
}

/* ---- Navigation ---------------------------------------------------------- */

.site-nav__list {
  list-style: none;
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-nav);
  text-decoration: none;
  text-transform: uppercase;
}

@media (hover: hover) {
  .site-nav__link:hover {
    text-decoration: underline;
  }
}

/* État actif : aucun soulignement (ni au survol) ; l'entrée reste signalée
   aux technologies d'assistance par aria-current. */
.site-nav__link[aria-current="page"],
.site-nav__link[aria-current="location"] {
  text-decoration: none;
}

/* ---- Bouton menu mobile -------------------------------------------------- */

.menu-toggle {
  display: none;
  position: relative;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-left: auto;
  margin-right: calc(var(--space-2) * -1);
}

.js .menu-toggle {
  display: block;
}

.menu-toggle__bar {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  background-color: currentColor;
  transition: transform var(--duration-base) var(--ease-out),
    opacity var(--duration-fast) linear;
}

.menu-toggle__bar:nth-child(1) { top: 15px; }
.menu-toggle__bar:nth-child(2) { top: 21px; }
.menu-toggle__bar:nth-child(3) { top: 27px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---- Navigation < 1024px : panneau mobile -------------------------------- */
/* Sans JS : la navigation reste affichée en ligne sous le logo. */

.site-header__inner {
  flex-wrap: wrap;
}

.site-nav {
  flex-basis: 100%;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-5);
}

.site-nav__link {
  font-size: var(--text-xs);
}

/* Avec JS : panneau plein écran sous le header */
.js .site-header__inner {
  flex-wrap: nowrap;
}

.js .site-nav {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: var(--z-menu);
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-ivory);
  border-top: var(--rule-width) solid var(--color-rule-on-light);
  padding: var(--space-5) var(--grid-gutter) var(--space-7);
}

.js .site-nav.is-open {
  display: block;
}

.js .site-nav__list {
  display: block;
}

.js .site-nav__item {
  border-bottom: var(--rule-width) solid var(--color-rule-on-light-soft);
}

.js .site-nav__link {
  min-height: 3.5rem;
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: 0;
}

.js .site-nav__item--cta {
  border-bottom: 0;
  padding-top: var(--space-6);
}

.site-nav__cta {
  width: 100%;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding-block: var(--space-7) var(--space-5);
}

.site-footer__main {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: var(--rule-width) solid var(--surface-rule-soft);
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-sans-condensed-temp);
  font-size: 2.25rem;
  font-weight: var(--weight-black);
  font-stretch: condensed;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.site-footer__nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-5);
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-nav);
  text-decoration: none;
  text-transform: uppercase;
}

@media (hover: hover) {
  .site-footer__link:hover,
  .site-footer__link[aria-current="page"] {
    text-decoration: underline;
  }
}

.site-footer__aside {
  display: grid;
  gap: var(--space-3);
}

.site-footer__social {
  list-style: none;
  display: flex;
  gap: var(--space-3);
}

.site-footer__infos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  padding-block: var(--space-6);
  border-bottom: var(--rule-width) solid var(--surface-rule-soft);
}

.site-footer__info dt {
  margin-bottom: var(--space-1);
  color: var(--surface-muted);
}

.site-footer__info dd {
  font-size: var(--text-sm);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-5);
  color: var(--surface-muted);
}

/* ==========================================================================
   Boutons & liens d'action
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  border: var(--rule-width) solid transparent;
  border-radius: var(--radius-none);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-nav);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--duration-fast) linear,
    color var(--duration-fast) linear,
    border-color var(--duration-fast) linear;
}

/* CTA principal : cobalt */
.btn--primary {
  background-color: var(--color-cobalt);
  border-color: var(--color-cobalt);
  color: var(--color-ivory);
}

@media (hover: hover) {
  .btn--primary:hover {
    background-color: var(--surface-fg);
    border-color: var(--surface-fg);
    color: var(--surface-bg);
  }
}

/* Bouton filaire (« DÉCOUVRIR NOTRE HISTOIRE ») */
.btn--outline {
  border-color: currentColor;
  color: inherit;
}

@media (hover: hover) {
  .btn--outline:hover {
    background-color: var(--surface-fg);
    border-color: var(--surface-fg);
    color: var(--surface-bg);
  }
}

.btn__icon,
.link-arrow__icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
  .btn:hover .btn__icon,
  .link-arrow:hover .link-arrow__icon {
    transform: translateX(3px);
  }
}

/* Lien fléché souligné (« DÉCOUVRIR LE LIEU → ») */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  text-transform: uppercase;
}

.link-arrow__label {
  padding-bottom: 2px;
  border-bottom: var(--rule-width) solid currentColor;
}

/* Variante accent : réservée aux surfaces claires (contraste AA) */
.link-arrow--accent {
  color: var(--color-cobalt);
}

/* Bouton rond fléché (hero : « RÉSERVER UNE TABLE → ») */
.btn-round {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%; /* forme fonctionnelle issue des maquettes */
  background-color: var(--color-cobalt);
  color: var(--color-ivory);
  text-decoration: none;
  transition: background-color var(--duration-fast) linear;
}

@media (hover: hover) {
  .btn-round:hover {
    background-color: var(--surface-fg);
    color: var(--surface-bg);
  }
}

.btn-round svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Lien précédé d'un filet (« —— VOIR LA CARTE COMPLÈTE → ») :
   filet et flèche en cobalt, texte dans la couleur de la surface (contraste AA) */
.link-arrow--ruled::before {
  content: "";
  width: 1.25rem;
  height: var(--rule-width);
  background-color: var(--color-cobalt);
}

.link-arrow--ruled .link-arrow__label {
  border-bottom: 0;
}

.link-arrow--ruled .link-arrow__icon {
  color: var(--color-cobalt);
}

/* Lien texte en casse normale (« Une tanche → ») */
.link-arrow--text {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  text-transform: none;
}

@media (hover: hover) {
  .btn-round-host:hover .btn-round {
    background-color: var(--surface-fg);
    color: var(--surface-bg);
  }
}

/* ==========================================================================
   Médias
   ========================================================================== */

.media {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-rule-soft);
}

.media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--mono img {
  filter: grayscale(1);
}

/* Photos issues des maquettes : les bandes claires font partie des fichiers.
   Sur téléphone, les sortir du cadre pour que la photo rejoigne exactement
   les bords de son module (notamment à côté des panneaux noirs).
   Les dimensions du cadre et les animations restent inchangées. */
@media (max-width: 1023.98px) {
  .media img:is(
    [src="assets/images/maison/lieu-salle-mobile.jpg"],
    [src="assets/images/maison/lieu-salle.jpg"],
    [src="assets/images/maison/brigade-gestes-mobile.jpg"],
    [src="assets/images/maison/brigade-gestes.jpg"],
    [src="assets/images/maison/cuisine-feu-mobile.jpg"],
    [src="assets/images/maison/cuisine-feu.jpg"],
    [src="assets/images/maison/matieres-comptoir.jpg"],
    [src="assets/images/maison/resa-comptoir.jpg"]
  ) {
    position: absolute;
    top: var(--photo-top, 0%);
    left: var(--photo-left, 0%);
    width: var(--photo-width, 100%);
    height: var(--photo-height, 100%);
    max-width: none;
    object-fit: cover;
  }

  /* Retraits mesurés sur les fichiers, avec 1px de marge pour le JPEG. */
  .media img[src="assets/images/maison/lieu-salle-mobile.jpg"],
  .media img[src="assets/images/maison/lieu-salle.jpg"] {
    --photo-left: -1.5209%;
    --photo-width: 102.6616%;
  }

  .media img[src="assets/images/maison/lieu-salle.jpg"] {
    --photo-top: -0.8214%;
    --photo-height: 100.8214%;
  }

  .media img[src="assets/images/maison/brigade-gestes-mobile.jpg"],
  .media img[src="assets/images/maison/brigade-gestes.jpg"] {
    --photo-width: 101.5133%;
  }

  .media img[src="assets/images/maison/brigade-gestes-mobile.jpg"] {
    --photo-top: -1.8256%;
    --photo-height: 101.8256%;
  }

  .media img[src="assets/images/maison/cuisine-feu-mobile.jpg"],
  .media img[src="assets/images/maison/cuisine-feu.jpg"] {
    --photo-top: -1.3730%;
    --photo-height: 104.3479%;
  }

  .media img[src="assets/images/maison/cuisine-feu.jpg"] {
    --photo-left: -1.3540%;
    --photo-width: 101.3540%;
  }

  .media img[src="assets/images/maison/matieres-comptoir.jpg"] {
    --photo-left: -0.7783%;
    --photo-width: 100.7783%;
  }

  .media img[src="assets/images/maison/resa-comptoir.jpg"] {
    --photo-left: -1.5038%;
    --photo-width: 103.7594%;
  }
}

/* ==========================================================================
   Liste de plats (Édition, Carte)
   ========================================================================== */

.menu-list {
  list-style: none;
  border-bottom: var(--rule-width) solid var(--surface-rule-soft);
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: var(--rule-width) solid var(--surface-rule-soft);
}

.menu-item__name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.menu-item__desc {
  grid-column: 1;
  margin-top: var(--space-1);
  color: var(--surface-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.menu-item__price {
  grid-column: 2;
  grid-row: 1;
}

/* ==========================================================================
   Modules éditoriaux (homepage et carte)
   ========================================================================== */

/* Titres éditoriaux serif des modules (DES PRODUITS DE CARACTÈRE, JOURNAL…) */
.module-title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: var(--weight-regular);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.module-text {
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* ==========================================================================
   Repères éditoriaux
   ========================================================================== */

/* Filet court « —— » */
.rule-short {
  display: inline-block;
  width: var(--rule-short);
  height: var(--rule-width);
  background-color: currentColor;
  vertical-align: middle;
}

/* Index numéroté (« 01  UNE CUISINE INSTINCTIVE… ») */
.index {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: start;
}

/* ==========================================================================
   Page temporaire (LOT 01) — à supprimer au LOT 02
   ========================================================================== */

.page-temp {
  padding-block: var(--space-8) var(--space-9);
}

.page-temp__title {
  margin-block: var(--space-4) var(--space-6);
}

.lot-test {
  padding-block: var(--space-7);
  border-top: var(--rule-width) solid var(--surface-rule-soft);
}

.lot-test__cell {
  min-height: 3rem;
  padding: var(--space-2);
  outline: 1px dashed var(--surface-rule-soft);
  outline-offset: -1px;
  font-size: var(--text-2xs);
}