/* ==========================================================================
   Run Event Concept · habillage « lyres »
   La nuit d'une soirée réussie : fond nuit profonde, deux couleurs de
   faisceau (ambre chaud, blanc froid), puis le jour (ivoire, sable) pour
   l'offre et l'organisation. Titres en Big Shoulders Display, texte en Manrope.
   ========================================================================== */
:root {
  --nuit: #070a12;
  --nuit-haute: #0e1626;
  --ivoire: #f6f1e7;
  --sable: #ebe2cf;
  --encre: #14110d;
  --ambre: #ffb454;
  --froid: #cfe3ff;

  --fond: var(--ivoire);
  --surface: var(--sable);
  --texte: var(--encre);
  --texte-doux: #4d4538;
  --accent: var(--ambre);
  --accent-fort: #8a4800;          /* l'ambre lisible sur fond clair */
  --accent-texte: #1a1106;
  --ouverture-fond: var(--nuit);
  --ouverture-texte: #f4efe4;
  --pied-fond: var(--nuit);
  --pied-texte: #f4efe4;
  --titre: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --corps: "Manrope", system-ui, sans-serif;

  /* Lus par signature.js (getComputedStyle) */
  --faisceau-ambre: #ffb454;
  --faisceau-froid: #cfe3ff;
  --brume: #7d9bd1;

  --nav-fond: var(--nuit);
  --nav-texte: #f4efe4;
  --nav-bord: rgb(244 239 228 / .12);
  --nav-actif: rgb(244 239 228 / .13);

  --filigrane-fond: #0e1626;
  --filigrane-texte: #f4efe4;
  --filigrane-bord: rgb(244 239 228 / .32);
  --filigrane-point: #ffb454;

  --assistant-fond: #ffb454;
  --assistant-texte: #1a1106;
  --assistant-panneau: #0e1626;
  --assistant-panneau-texte: #f4efe4;
  --assistant-bord: rgb(244 239 228 / .16);
  --assistant-bulle: rgb(244 239 228 / .09);

  --bouton-rayon: .35rem;
  --rayon: .5rem;
}

/* Les titres : très grands, serrés, en capitales. */
h1, h2, h3, .pilier h3, .navigation__nom, .pied__nom { text-transform: uppercase; font-weight: 800; letter-spacing: .005em; }
h2 em, h1 em { font-style: normal; }
.navigation__nom { font-size: 1.5rem; letter-spacing: .06em; }
.navigation__appel, .bouton { border-radius: var(--bouton-rayon); word-spacing: .14em; } /* Manrope serre trop « Y aller » */
.navigation__liens a { border-radius: var(--bouton-rayon); }

/* ---------------- 1. Le premier écran : la salle, de nuit ---------------- */
.ouverture__decor {
  background:
    radial-gradient(120% 70% at 62% 108%, rgb(60 84 140 / .55), transparent 62%),
    radial-gradient(90% 60% at 10% -10%, rgb(36 50 92 / .6), transparent 60%),
    linear-gradient(180deg, #05070d 0%, var(--nuit-haute) 100%);
}
/* L'aube : au défilement, un fond chaud monte du bas (jamais un voile gris). */
.ouverture__decor::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #ffc778 0%, #f59a5f 16%, #b8647a 36%, #3b3a66 60%, transparent 88%);
  opacity: clamp(0, calc((var(--p, 0) - .38) * 1.8), 1);
}
.ouverture__decor svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ouverture__texte { max-width: min(46rem, 100%); }
.ouverture .surtitre { color: var(--accent); }
.ouverture h1 {
  font-size: clamp(3.4rem, 1rem + 8.2vw, 8.6rem); line-height: .94; letter-spacing: 0; margin-bottom: 1.6rem;
  text-shadow: 0 0 60px rgb(255 180 84 / .22);
}
.ouverture h1 em { color: var(--accent); }
.ouverture__intro { max-width: 30rem; color: #dcd7cd; } /* opaque : base.css passe par color-mix, que contraste.mjs lit de travers */
.ouverture .bouton { box-shadow: 0 0 0 1px rgb(255 180 84 / .5), 0 10px 40px rgb(255 180 84 / .28); }
.ouverture .lien-fleche { border-bottom-color: rgb(244 239 228 / .55); }

/* ---------------- 2. L'entreprise : le jour ---------------- */
.maison { background: var(--fond); }
.section h2 { font-size: clamp(2.8rem, 1rem + 5.6vw, 5.6rem); line-height: .9; }
.section h2 em { color: var(--accent-fort); }
.section__tete { max-width: 56rem; }
.pilier { border-top: 2px solid var(--encre); padding-top: 1.1rem; }
.pilier::before {
  font: 800 clamp(3.6rem, 2rem + 5vw, 6rem)/.9 var(--titre); letter-spacing: 0; margin-bottom: .8rem;
  color: var(--accent-fort);
}
.pilier h3 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 700; line-height: .98; }
.pilier p { max-width: 24rem; }

/* ---------------- 3. L'offre : les trois onglets ---------------- */
.offre { background: var(--surface); }
.offre .carte-resto__tete h2 { font-size: clamp(2.8rem, 1rem + 5.6vw, 5.6rem); }
.offre .carte-resto__tete h2 em { color: var(--accent-fort); font-style: normal; }
.carte-resto__onglets { gap: .6rem; }
.carte-resto__onglets [role="tab"] {
  border: 2px solid var(--encre); border-radius: var(--bouton-rayon); min-height: 56px; padding: 0 1.6rem;
  font: 800 1.35rem/1 var(--titre); letter-spacing: .06em; text-transform: uppercase;
}
.carte-resto__onglets [role="tab"][aria-selected="true"] { background: var(--encre); border-color: var(--encre); color: #f4efe4; box-shadow: 0 5px 0 var(--ambre); }
.carte-resto__liste { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.offre .carte-resto__liste li {
  position: relative; padding: 1.5rem 1.5rem 1.6rem; background: var(--fond); border: 1px solid var(--carte-filet);
  border-top: 4px solid var(--ambre); border-radius: var(--rayon); overflow: hidden;
}
.offre .carte-resto__liste strong { font: 800 clamp(1.7rem, 1.3rem + 1vw, 2.1rem)/1 var(--titre); text-transform: uppercase; letter-spacing: .01em; margin-bottom: .6rem; }
.offre .carte-resto__liste span { color: var(--texte-doux); }
.carte-resto__note { max-width: 46rem; }
.exemple::before { background: var(--encre); color: #f4efe4; border-color: var(--encre); }

/* ---------------- 4. Ce que ce site ferait : des boîtiers de lyre ---------------- */
.atouts { background: var(--fond); }
.atout {
  position: relative; overflow: hidden; background: var(--encre); color: #f4efe4; border: 0;
  border-radius: var(--rayon); padding: 2rem 1.6rem 1.8rem;
}
.atout::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(from 150deg at 82% -12%, transparent 0deg, rgb(255 180 84 / .26) 9deg, transparent 20deg);
}
.atout strong { position: relative; font: 800 clamp(1.9rem, 1.4rem + 1vw, 2.3rem)/1 var(--titre); text-transform: uppercase; color: var(--ambre); margin-bottom: .7rem; }
.atout span { position: relative; color: #ddd6c6; }

/* ---------------- 5. Nous trouver ---------------- */
.infos { background: var(--surface); }
.infos h2 { font-size: clamp(2.6rem, 1rem + 5vw, 5rem); }
.carte-google { border-radius: var(--rayon); }

.pied { color: #c9c4ba; }
.pied__nom { color: var(--ambre); font-size: 2rem; }

/* ---------------- Téléphone ---------------- */
@media (max-width: 760px) {
  /* Les trois onglets tiennent sur une ligne. */
  .carte-resto__onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .carte-resto__onglets [role="tab"] { padding: 0 .2rem; font-size: 1.05rem; letter-spacing: .03em; min-height: 52px; }
  /* Au téléphone le texte occupe le bas : l'image de repli s'éteint derrière lui. */
  .ouverture__decor .repli-webgl { -webkit-mask-image: linear-gradient(0deg, transparent 0, transparent 29rem, #000 35rem); mask-image: linear-gradient(0deg, transparent 0, transparent 29rem, #000 35rem); }
  .ouverture h1 { font-size: clamp(3.4rem, 1rem + 13.5vw, 5.4rem); }
}
@media (max-width: 760px) and (max-height: 700px) {
  .ouverture h1 { font-size: 3.2rem; }
  .ouverture__intro { font-size: .98rem; }
}

/* Le plan Google ne doit pas se charger au premier écran (budget 400 Ko) :
   le gabarit pose loading="lazy", mais Chrome charge quand même l'iframe d'un
   écran de 1280 px ; content-visibility la retient jusqu'à l'approche. */
.infos { content-visibility: auto; contain-intrinsic-size: auto 42rem; }