/* Café Delyssa · base, typographie, boutons et apparitions, communs à toutes les pages */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hauteur-nav) + 64px); }
body {
  margin: 0;
  background: var(--noir);
  color: var(--creme);
  font: 400 15px/1.65 var(--police-texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--or); text-decoration: none; }
a:hover { color: var(--or-clair); }
:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--police-titre); margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding-inline: var(--gouttiere); }
.surtitre {
  font: 500 11px/1 var(--police-texte);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--or);
}
.titre-section { font-size: clamp(28px, 4vw, 42px); line-height: 1.1; margin-top: 14px; }
.accent { font-family: var(--police-accent); font-style: italic; font-weight: 500; }
.metal {
  background: var(--degrade-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.coeur { color: var(--or); font-size: .85em; margin-left: 6px; }

/* ===== Boutons ===== */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 28px;
  font: 600 12px/1 var(--police-texte); letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--rayon-image); transition: background .25s, color .25s, border-color .25s;
}
.bouton-plein { background: var(--or); color: var(--noir); }
.bouton-plein:hover { background: var(--or-clair); color: var(--noir); }
.bouton-ligne { border-color: var(--ligne-forte); color: var(--creme); }
.bouton-ligne:hover { border-color: var(--or); color: var(--or-clair); }
/* Badge Uber Eats de la navbar : nom de la marque, point vert, libellé « Commander » */
.u1 { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 20px; border-radius: var(--rayon-image); background: #000; color: #fff; border: 1px solid #06c167; text-decoration: none; transition: background .25s, transform .25s var(--courbe), border-color .25s; }
.u1 .mot { font: 700 15px/1 var(--police-texte); letter-spacing: -.01em; white-space: nowrap; }
.u1 .mot i { font-style: normal; color: #06c167; }
.u1 .lib { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--police-texte); letter-spacing: .06em; color: #cfc6b1; white-space: nowrap; }
.u1 .pt { width: 7px; height: 7px; border-radius: 50%; background: #06c167; }
.u1:hover { background: #0a0a0a; border-color: #2bd67f; transform: translateY(-1px); }
.u1:focus-visible { outline: 2px solid #06c167; outline-offset: 3px; }
.lien-fleche { font: 500 12px/1 var(--police-texte); letter-spacing: .16em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center;
  padding-block: 16px; margin-block: -16px; } /* zone tactile de 44 px, sans décaler la mise en page */
.lien-fleche span { transition: transform .25s; }
.lien-fleche:hover span { transform: translateX(4px); }

/* ===== Sections ===== */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-veine { background: var(--noir-veine); }
.entete-section { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 56px); }

/* ===== Apparition au défilement ===== */
.apparait { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s var(--courbe); }
.apparait.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .apparait { opacity: 1; transform: none; }
}

/* Liens de la navbar sur une seule ligne ; entre 900 et 1240 px, espacement et taille resserrés pour tenir avec le badge */
.nav-liens a { white-space: nowrap; }
.u1 { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1240px) {
  .nav-liens { gap: 18px; }
  .nav .marque { flex-shrink: 0; white-space: nowrap; }
  .nav-liens a { font-size: 11px; letter-spacing: .12em; }
  .u1 .lib { font-size: 11px; }
}

/* Badge Uber Eats dans le menu mobile : largeur de son contenu, libellé jamais coupé */
.nav-liens .u1 { width: max-content; flex: 0 0 auto; white-space: nowrap; }

/* Navbar 14 : badge Uber Eats et logo, sélecteurs assez spécifiques pour ne pas être écrasés par gabarit.css */
.nav .nav-liens a.u1 { padding: 0 20px; min-height: 42px; border-radius: var(--rayon-image); border: 1px solid #06c167; background: #000; color: #fff; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.nav .nav-liens a.u1 b { color: #06c167; font-weight: 700; }
.nav .nav-liens a.u1:hover { background: #06c167; color: #03140b; }
.nav .nav-liens a.u1:hover b { color: #03140b; }
.nav .marque { flex: 0 0 auto; white-space: nowrap; }