/* ==========================================================================
   Chez Malet · habillage « marmite » : nuit de braise, puis jour de terre cuite
   ========================================================================== */
:root {
  /* Le feu (lus par signature.js) */
  --braise: #c8401a;
  --flamme: #f08a2a;
  --lueur: #ffd47a;
  /* La nuit */
  --charbon: #15100c;
  --nuit-texte: #f6e9d6;
  /* Le jour : crème, terre cuite, curcuma, vert brède */
  --creme: #f6ead6;
  --argile: #efd9bb;
  --terre: #a63b1b;
  --curcuma: #e3a21c;
  --vert: #26452f;
  --vert-texte: #f1e7d0;

  --fond: var(--creme);
  --surface: var(--argile);
  --texte: #2a1a12;
  --texte-doux: #5b4234;
  --accent: var(--terre);
  --accent-fort: #9c3618;
  --accent-texte: #fff7ea;
  --ouverture-fond: var(--charbon);
  --ouverture-texte: var(--nuit-texte);
  --pied-fond: #0f0a08;
  --pied-texte: #f6e9d6;
  --titre: "Rozha One", Georgia, serif;
  --corps: "Karla", system-ui, sans-serif;
  --rayon: .35rem;
  --bouton-rayon: .35rem;

  --filigrane-fond: #f6ead6;
  --filigrane-texte: #2a1a12;
  --filigrane-bord: rgb(42 26 18 / .3);
  --filigrane-point: #a63b1b;
  --assistant-fond: #a63b1b;
  --assistant-texte: #fff7ea;
  --assistant-panneau: #f6ead6;
  --assistant-panneau-texte: #2a1a12;
  --assistant-bord: rgb(42 26 18 / .16);
  --assistant-bulle: #ead4b4;
  --nav-fond: #0f0a08;
  --nav-texte: #f6e9d6;
  --nav-bord: rgb(246 233 214 / .12);
  --nav-actif: rgb(246 233 214 / .14);
}

body { font-weight: 400; }
h1, h2, h3 { letter-spacing: 0; line-height: 1.08; }
.surtitre { font-weight: 700; letter-spacing: .18em; }

/* ---------------- Premier écran : la nuit, la marmite sur le feu ---------------- */
.ouverture { background-color: var(--charbon); }
/* La chaleur du fond suit la marmite (le décor est calé sur l'écran, pas sur la scène entière). */
.ouverture__decor {
  background-image:
    radial-gradient(ellipse 46% 40% at 75% 90%, rgb(200 64 26 / .34), transparent 70%),
    radial-gradient(ellipse 90% 55% at 75% 108%, rgb(120 30 12 / .55), transparent 72%);
}
.ouverture .surtitre { color: var(--curcuma); }
.ouverture h1 { font-size: clamp(2.7rem, 1.4rem + 5.4vw, 6.2rem); }
.ouverture h1 em { font-style: normal; color: var(--curcuma); display: block; }
.ouverture__texte { max-width: min(38rem, 54vw); }
.ouverture .bouton { background: var(--terre); color: var(--accent-texte); box-shadow: 0 0 0 1px rgb(255 212 122 / .35); }
.ouverture .lien-fleche { color: var(--nuit-texte); border-bottom-color: rgb(246 233 214 / .55); }
.ouverture__indice { color: var(--nuit-texte); }

.marmite { position: absolute; right: max(var(--marge), 5vw); bottom: 5svh; width: min(42vw, 70svh); }
/* L'aube : à mesure que le feu baisse, une lueur de curcuma monte du bas, la page passe au jour. */
.ouverture__decor::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(214 108 34 / .55), rgb(166 59 27 / .16) 38%, transparent 70%);
  opacity: clamp(0, calc((var(--p, 0) - .45) * 2.2), 1);
}
.marmite svg { width: 100%; height: auto; overflow: visible; }
.marmite__reflet { opacity: calc(1 - var(--p, 0) * 1.5); }
/* Sans WebGL (repli, mouvement réduit), la braise fixe s'éteint elle aussi avec le défilement. */
.ouverture:not(.toile-prete) .marmite .repli-webgl { opacity: max(0, calc(1 - var(--p, 0) * 1.5)); }

/* ---------------- Bande de passage de la nuit au jour ---------------- */
.maison { position: relative; }
.maison::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 10px;
  background: repeating-linear-gradient(90deg, var(--terre) 0 36px, var(--curcuma) 36px 72px, var(--vert) 72px 108px);
}
.maison .section__tete { margin-top: .5rem; }

/* ---------------- Le jour ---------------- */
.section h2 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); }
.pilier { border-top: 3px solid var(--texte); padding-top: 1.2rem; }
.pilier::before { font: 400 2.4rem/1 var(--titre); letter-spacing: 0; color: var(--terre); margin-bottom: .8rem; }
.pilier h3 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.95rem); }
.pilier p { font-size: 1.04rem; }

.offre { position: relative; }
.carte-resto__onglets [role="tab"] {
  border: 2px solid var(--texte); border-radius: var(--bouton-rayon); background: transparent; color: var(--texte); font-weight: 700;
}
.carte-resto__onglets [role="tab"][aria-selected="true"] { background: var(--texte); color: var(--creme); border-color: var(--texte); }
.carte-resto__liste { gap: 0 3rem; }
.carte-resto__liste li { border-bottom: 1px dashed rgb(42 26 18 / .38); }
.carte-resto__liste strong { color: var(--texte); }
.carte-resto__note { max-width: 44rem; }
.exemple::before { color: var(--accent-fort); }

.atouts { background: var(--vert); color: var(--vert-texte); }
.atouts .surtitre { color: var(--lueur); }
.atout { background: rgb(246 233 214 / .07); border-color: rgb(246 233 214 / .22); border-radius: var(--rayon); }
.atout strong { color: var(--vert-texte); }
.atout span { color: rgb(241 231 208 / .86); }

.infos h2 { margin-bottom: 1.6rem; }
.horaires th, .horaires td { border-bottom-color: rgb(42 26 18 / .3); }
.carte-google { border: 2px solid var(--texte); }
.coordonnees a { color: var(--accent-fort); }
.pied { border-top: 10px solid var(--terre); }

/* ---------------- Téléphone : la marmite au-dessus du texte ---------------- */
@media (max-width: 760px) {
  .ouverture__decor { background-image: radial-gradient(ellipse 85% 26% at 50% 40%, rgb(200 64 26 / .34), transparent 72%); }
  .ouverture__texte { max-width: none; padding-bottom: 4.6rem; }
  .ouverture h1 { font-size: clamp(2.2rem, 11vw, 2.8rem); margin-bottom: .8rem; }
  .ouverture__intro { font-size: .98rem; line-height: 1.5; margin-bottom: .6rem; }
  .ouverture__actions { margin-top: 1rem; }
  .marmite { right: auto; left: 50%; translate: -50% 0; bottom: auto; top: calc(var(--nav-hauteur) + 1.6rem); width: min(74vw, 34svh); }
  .pilier { padding-top: 1rem; }
}
@media (max-width: 760px) and (max-height: 700px) { .marmite { width: min(58vw, 28svh); } }

/* Le plan Google (lazy) se chargeait dès l'ouverture : il pesait 590 Ko sur le premier écran.
   Une section hors écran n'est pas rendue, donc son iframe n'est demandée qu'à l'approche. */
.infos { content-visibility: auto; contain-intrinsic-size: auto 42rem; }

/* base.css pose ces deux couleurs avec color-mix(), que contraste.mjs lit de travers
   (« color(srgb 0.96 ... ») pris pour du 0-255) : on les redit en rgb() simple. */
.ouverture__intro { color: rgb(246 233 214 / .86); }
.pied { color: rgb(246 233 214 / .8); }