/* ==========================================================================
   Le Délice · habillage « ticket » : le comptoir d'un snack.
   Rouge tomate, jaune moutarde, papier kraft, noir d'encre. Titres en Anton
   (condensé gras), texte en Archivo. Thème unique.
   ========================================================================== */

:root {
  color-scheme: light;
  --encre: #1a1410;
  --tomate: #a82314;
  --moutarde: #f5b800;
  --creme: #fff3d6;
  --kraft: #efddb8;

  --fond: var(--kraft);
  --surface: #faf0d8;
  --texte: var(--encre);
  --texte-doux: #4b3e31;
  --accent: var(--moutarde);
  --accent-texte: var(--encre);
  --accent-fort: var(--tomate);
  --ouverture-fond: var(--tomate);
  --ouverture-texte: var(--creme);
  --pied-fond: var(--encre);
  --pied-texte: var(--creme);
  --titre: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --corps: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bouton-rayon: 6px;
  --rayon: 6px;

  --nav-fond: var(--encre);
  --nav-texte: var(--creme);
  --nav-bord: var(--moutarde);
  --nav-actif: rgb(255 243 214 / .16);
  --filigrane-fond: var(--creme);
  --filigrane-texte: var(--encre);
  --filigrane-bord: var(--encre);
  --filigrane-point: var(--tomate);
  --assistant-fond: var(--moutarde);
  --assistant-texte: var(--encre);
  --assistant-panneau: var(--creme);
  --assistant-panneau-texte: var(--encre);
  --assistant-bord: var(--encre);
  --assistant-bulle: var(--kraft);

  /* Le ticket de la signature (lus par signature.js). */
  --ticket-papier: #f7f3e8;
  --ticket-encre: #231d18;
  --ticket-tampon: #b3261a;

  --imprimante-l: 22rem;
}

/* Les titres : Anton en capitales, serrés. */
h1, h2, h3 { text-transform: uppercase; letter-spacing: .005em; line-height: .96; }
.section h2 { font-size: clamp(2.5rem, 1.2rem + 4.8vw, 5.2rem); }
.surtitre {
  display: inline-block; background: var(--encre); color: var(--moutarde);
  padding: .4rem .75rem; border-radius: 3px; letter-spacing: .16em; font-weight: 700; font-size: .76rem;
  rotate: -1.5deg;
}

/* Boutons : étiquettes franches, ombre dure. */
.bouton { border: 3px solid var(--encre); box-shadow: 4px 4px 0 var(--encre); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.bouton:hover { box-shadow: 2px 2px 0 var(--encre); translate: 2px 2px; }
.lien-fleche { border-bottom-width: 2px; }

/* Barre du haut */
.navigation { border-bottom-width: 3px; }
.navigation__nom { font-family: var(--titre); text-transform: uppercase; letter-spacing: .04em; font-size: 1.5rem; }
.navigation__appel { border: 2px solid var(--encre); border-radius: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.navigation__liens a { border-radius: 6px; }

/* ---------------- 1. Le premier écran ---------------- */
.ouverture {
  background-image: repeating-linear-gradient(90deg, rgb(0 0 0 / .08) 0 4.5rem, transparent 4.5rem 9rem);
}
.ouverture .surtitre { background: var(--encre); color: var(--moutarde); margin-bottom: 1.4rem; }
.ouverture h1 {
  font-size: clamp(3rem, 1rem + 8vw, 8.5rem); line-height: 1.05; margin-bottom: 1.6rem;
  text-shadow: 4px 4px 0 rgb(26 20 16 / .4);
}
.ouverture h1 em { font-style: normal; color: #ffd23f; }
.ouverture__intro { font-weight: 500; color: var(--creme); }
.ouverture .bouton { background: var(--moutarde); }
.ouverture .lien-fleche { color: var(--creme); }
.ouverture__texte { max-width: min(46rem, calc(100% - var(--imprimante-l) - var(--marge))); }

/* Le bas de l'écran : une frise damier, comme la bordure d'un comptoir. */
.auvent {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18px; z-index: 1;
  background:
    conic-gradient(var(--encre) 25%, var(--moutarde) 0 50%, var(--encre) 0 75%, var(--moutarde) 0) 0 0 / 18px 18px;
  border-top: 3px solid var(--encre);
}
/* Le disque jaune derrière le ticket. */
.comptoir-trame {
  position: absolute; z-index: 1; right: calc(var(--marge) - 4rem); top: 7rem; width: 30rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--moutarde); box-shadow: 8px 8px 0 var(--encre);
}

/* La caisse : un boîtier noir sous la barre, avec la fente d'où sort le ticket. */
.imprimante {
  position: absolute; z-index: 3; top: var(--nav-hauteur); right: var(--marge); width: var(--imprimante-l); height: 3.6rem;
  background: linear-gradient(#2d241d, #17120e); border-radius: 0 0 14px 14px;
  border: 3px solid var(--encre); border-top: 0; box-shadow: 0 8px 0 rgb(26 20 16 / .35);
}
.imprimante__voyant {
  position: absolute; left: 1.1rem; top: .9rem; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--moutarde); box-shadow: 0 0 0 3px rgb(245 184 0 / .25), 0 0 14px rgb(245 184 0 / .8);
}
.imprimante__touches { position: absolute; right: 1.1rem; top: .8rem; display: flex; gap: .4rem; }
.imprimante__touches i { width: 1.1rem; height: .8rem; border-radius: 2px; background: rgb(255 243 214 / .22); }
.fente {
  position: absolute; left: .8rem; right: .8rem; bottom: .35rem; height: .6rem; border-radius: 3px;
  background: #050302; box-shadow: inset 0 2px 3px #000, 0 1px 0 rgb(255 243 214 / .18);
}

/* ---------------- 2. Le snack ---------------- */
.maison {
  background-color: var(--kraft);
  background-image: radial-gradient(rgb(90 55 15 / .13) 1px, transparent 1.5px); background-size: 8px 8px;
}
.piliers { gap: clamp(1.2rem, 2.6vw, 2rem); }
.pilier {
  background: var(--surface); border: 3px solid var(--encre); border-radius: 6px; padding: 1.4rem 1.5rem 1.7rem;
  box-shadow: 6px 6px 0 var(--encre);
}
.pilier:nth-child(2) { rotate: .8deg; }
.pilier:nth-child(1) { rotate: -.6deg; }
.pilier::before {
  content: "N° " counter(pilier, decimal-leading-zero); font: 400 1.05rem/1 var(--titre); letter-spacing: .08em; color: var(--tomate);
  padding-bottom: .8rem; margin-bottom: 1rem; border-bottom: 2px dashed var(--encre);
}
.pilier h3 { font-size: clamp(1.8rem, 1.3rem + 1.3vw, 2.4rem); }
.pilier p { color: var(--texte-doux); }

/* ---------------- 3. La carte : l'ardoise ---------------- */
.offre {
  --texte: var(--creme); --texte-doux: #e6d8b8; --accent-fort: var(--moutarde);
  --carte-filet: rgb(255 243 214 / .28);
  background: var(--encre); color: var(--creme);
}
.offre .surtitre { background: var(--moutarde); color: var(--encre); }
.offre h2 { color: var(--moutarde); }
.carte-resto__onglets [role="tab"] { border-radius: 6px; border-width: 2px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: .92rem; }
.carte-resto__liste li { border-bottom: 2px dashed var(--carte-filet); }
.carte-resto__liste strong { font-size: 1.7rem; text-transform: uppercase; letter-spacing: .02em; color: var(--creme); }
.carte-resto__categorie { font-family: var(--titre); text-transform: uppercase; color: var(--moutarde); letter-spacing: .03em; }
.carte-resto__note { color: var(--texte-doux); }

/* ---------------- 4. Les atouts : des étiquettes ---------------- */
.atouts {
  background-color: var(--kraft);
  background-image: radial-gradient(rgb(90 55 15 / .13) 1px, transparent 1.5px); background-size: 8px 8px;
}
.atout { border: 3px solid var(--encre); border-radius: 6px; box-shadow: 6px 6px 0 var(--encre); padding: 1.6rem; rotate: -1deg; }
.atout:nth-child(2) { rotate: .9deg; }
.atout:nth-child(3) { rotate: -.4deg; }
.atout strong { font-size: 1.7rem; text-transform: uppercase; line-height: 1; margin-bottom: .8rem; }
.atout span { font-weight: 500; }
.atout:nth-child(1) { background: var(--moutarde); }
.atout:nth-child(1) span { color: var(--encre); }
.atout:nth-child(3) { background: var(--tomate); color: var(--creme); }
.atout:nth-child(3) span { color: var(--creme); }

/* ---------------- 5. Venir ---------------- */
.infos { --texte-doux: #3a2d10; --carte-filet: rgb(26 20 16 / .4); background: var(--moutarde); }
.infos .surtitre { background: var(--encre); color: var(--moutarde); }
.horaires th { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.carte-google { border: 3px solid var(--encre); border-radius: 6px; box-shadow: 8px 8px 0 var(--encre); }

.pied__nom { color: var(--moutarde); text-transform: uppercase; letter-spacing: .04em; }

/* ---------------- Assistant ---------------- */
.assistant-bouton { border: 3px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); }

/* ---------------- Téléphone ---------------- */
@media (max-width: 760px) {
  :root { --imprimante-l: 16.5rem; }
  .imprimante { right: auto; left: 50%; translate: -50% 0; }
  .comptoir-trame { display: none; }
  .ouverture__texte { max-width: none; }
  .ouverture h1 { font-size: clamp(2.8rem, 12vw, 4.2rem); }
  .ouverture .surtitre { margin-bottom: 1rem; }
  .pilier, .atout { rotate: none !important; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .ouverture h1 { font-size: 2.6rem; }
}

/* Texte du pied en couleur pleine : le contrôle de contraste ne sait pas lire
   le rendu « color(srgb …) » d'un color-mix (défaut de base.css, voir rapport). */
.pied { color: #dcd0b6; }

/* Au bureau, le texte est à côté du ticket : il reste lisible pendant toute la
   scène au lieu de s'effacer au quart (la règle de base.css vaut pour le téléphone). */
@media (min-width: 761px) {
  .ouverture__texte { opacity: clamp(0, calc((.88 - var(--p, 0)) * 14), 1); transform: translateY(calc(var(--p, 0) * -4vh)); }
}

/* La carte Google est en loading=lazy, mais Chromium la charge dès l'ouverture
   quand la page est courte (612 Ko au premier écran, budget 400). Tant que la
   section n'approche pas, son contenu n'est pas rendu, donc pas chargé. */
.infos { content-visibility: auto; contain-intrinsic-size: auto 900px; }