/* La Récré Ô Délices (Trévoux) — sa marque, par-dessus le kit (26/10/2026).
   Ses couleurs : le jaune et le noir de son logo (#E0B50F, #231F20), le mauve de sa carte (#AB72AC), un prune profond pour les
   sections sombres, un fond crème. Ses motifs : la tache jaune derrière le smiley de son logo, les vermicelles de son badge
   « La pause gourmande », les carreaux blancs à pois de son mur (jaune, mauve, noir), les rayures noir et blanc de sa salle. */
:root {
  --jaune: #e0b50f;
  --mauve: #ab72ac;
  --mark: color-mix(in oklab, #e0b50f 62%, transparent);
  --carreau: color-mix(in oklab, var(--ink) 9%, transparent);
  --vermicelles: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g stroke-linecap='round' stroke-width='7' fill='none'><path d='M24 30l16-9' stroke='%23e0b50f'/><path d='M92 18l4 17' stroke='%23ab72ac'/><path d='M160 34l15 9' stroke='%23231f20'/><path d='M196 86l-9 15' stroke='%23e0b50f'/><path d='M130 92l17-3' stroke='%23ab72ac'/><path d='M58 84l-6 16' stroke='%23231f20'/><path d='M14 150l17 4' stroke='%23ab72ac'/><path d='M88 150l12-12' stroke='%23e0b50f'/><path d='M150 160l-3 17' stroke='%23231f20'/><path d='M200 184l-16 8' stroke='%23e0b50f'/><path d='M48 200l15-8' stroke='%23231f20'/><path d='M112 206l16 5' stroke='%23ab72ac'/></g></svg>");
  --vague: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='16' viewBox='0 0 72 16'><path d='M3 8c6-5 11-5 16 0s10 5 16 0 11-5 16 0 10 5 17 0' fill='none' stroke='%23e0b50f' stroke-width='4' stroke-linecap='round'/></svg>");
}

/* le lilas des pastilles, moins rose que celui que le kit dérive du mauve (style en ligne : il faut :root:root pour passer devant) */
:root:root { --accent-soft: #f1e5f0; }

/* titres de section : une petite vague jaune, tracée à la main comme son logo */
.head h2::after, .split .text > h2::after, .ig-text h2::after, .carte-head h1::after {
  content: ""; display: block; width: 72px; height: 16px; margin: .75rem auto 0; background: var(--vague) no-repeat center / contain;
}
@media (min-width: 1000px) {
  .split .text > h2::after { margin-left: 0; }
  .ig-card.has-polas .ig-text h2::after { margin-left: 0; }
}
.manifesto .eyebrow, .tone-dark .eyebrow { color: var(--jaune); }

/* le hero : sa salle sous une arche, la tache jaune de son smiley derrière, des vermicelles */
.hero--split { overflow: hidden; }
.hero--split::before { display: none; }
.hero--split .media { isolation: isolate; }
.hero--split .media::before { content: ""; position: absolute; z-index: -1; width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--jaune);
  right: -7%; top: -6%; }
.hero--split .media::after { content: ""; position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; left: -12%; bottom: -10%;
  background: var(--vermicelles) center / 100% auto no-repeat; opacity: .95; }
.hero--split .badge { z-index: 2; }
.hero .eyebrow { color: var(--accent-text); }
@media (max-width: 999px) { .hero--split .media::before { width: 58%; right: -4%; } }

/* les étoiles et les guillemets au jaune de son logo */
.stars, .stars .star-fill { color: var(--jaune); }
.stars .star { color: color-mix(in oklab, var(--jaune) 30%, transparent); }
.review::after { color: color-mix(in oklab, var(--jaune) 45%, transparent); }

/* l'aperçu de la carte : le fond de l'accueil, uni (Quentin, 26/10 : les carreaux « font brouillon ») ; les prix au jaune */
.carte-points .cp-prix { color: var(--ink); background: color-mix(in oklab, var(--jaune) 34%, transparent); padding: .05rem .55rem; border-radius: 999px; }
.carte-fan .cf-page { box-shadow: 0 2px 4px rgba(35, 31, 32, .14), 0 22px 44px rgba(35, 31, 32, .22); }

/* la page de la carte : ses rubriques en cartes, prix au jaune */
.rb-prix { background: var(--jaune); color: var(--ink); }
.mi-sous { border-bottom-color: color-mix(in oklab, var(--jaune) 55%, transparent); }
.carte-head { position: relative; isolation: isolate; overflow: hidden; }
.carte-head::before { content: ""; position: absolute; z-index: -1; width: 220px; aspect-ratio: 1; right: max(-40px, calc(50% - 560px)); top: 18px;
  background: var(--vermicelles) center / 100% auto no-repeat; opacity: .9; }
.carte-head::after { content: ""; position: absolute; z-index: -1; width: 150px; aspect-ratio: 1; border-radius: 50%; left: max(-50px, calc(50% - 600px)); bottom: -40px;
  background: var(--jaune); opacity: .9; }
@media (max-width: 699px) { .carte-head::before { width: 130px; right: -40px; top: 0; } .carte-head::after { width: 90px; left: -40px; } }

/* les sections sombres en prune : boutons jaunes, comme son smiley sur le noir */
.tone-dark .btn--primary, .on-photo .btn--primary { background: var(--jaune); color: var(--ink); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.tone-dark .btn--primary:hover, .on-photo .btn--primary:hover { background: #f0c62a; }
.manifesto.tone-dark { overflow: hidden; isolation: isolate; }
.manifesto.tone-dark::before { content: ""; position: absolute; z-index: -1; width: clamp(160px, 22vw, 260px); aspect-ratio: 1; right: -40px; top: -30px;
  background: var(--vermicelles) center / 100% auto no-repeat; opacity: .55; }
.manifesto.tone-dark blockquote::before { content: "«\00a0"; color: var(--jaune); }
.manifesto.tone-dark blockquote::after { content: "\00a0»"; color: var(--jaune); }

/* Instagram : la carte posée sur un fond mauve pâle, une tache jaune */
.ig-band { overflow: hidden; isolation: isolate; }
.ig-band::before { content: ""; position: absolute; z-index: -1; width: clamp(140px, 18vw, 240px); aspect-ratio: 1; border-radius: 50%; background: var(--jaune); left: -50px; bottom: 8%; }
.ig-card { border: 0; box-shadow: 0 2px 4px rgba(35, 31, 32, .05), 0 24px 56px rgba(84, 46, 88, .14); }

/* le pied de page */
.site-footer .footer-social a { color: var(--jaune); font-weight: 650; }

/* téléphone : le logo au centre (Quentin, 26/10), le menu à gauche, l'appel à droite */
@media (max-width: 1023px) {
  .site-header .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .site-header .wordmark { grid-column: 2; grid-row: 1; justify-self: center; }
  .site-header .header-actions { display: contents; }
  .site-header .menu-toggle { grid-column: 1; grid-row: 1; justify-self: start; }
  .site-header .icon-btn--call { grid-column: 3; grid-row: 1; justify-self: end; }
}