/* Strada Pizza — thèmes et décorations
   Chaque thème redéfinit la palette. Le thème Noir est la palette de base (style.css). */

.theme-bordeaux  { --primaire: #5C1410; --profond: #3F0D0A; --sombre: #2A0907; --accent: #D4AF6A; --accent-clair: #EAD6A8; --sur-accent: #2A0907; --clair: #EDEBE6; --second: #213F2C; }
.theme-hiver     { --primaire: #172B45; --profond: #0F1F33; --sombre: #0B1626; --accent: #BFD8EC; --accent-clair: #E3EFF8; --sur-accent: #0F1F33; --clair: #EEF3F7; --second: #22364F; }
.theme-printemps { --primaire: #24513A; --profond: #1A3D2B; --sombre: #12301F; --accent: #F2B5C4; --accent-clair: #FADDE4; --sur-accent: #3A1626; --clair: #EEF2EA; --second: #6B3A55; }
.theme-ete       { --primaire: #0E4F5C; --profond: #0A3D47; --sombre: #072E36; --accent: #F5C04E; --accent-clair: #FBE3A6; --sur-accent: #2B2005; --clair: #EAF3F2; --second: #1F5E46; }
.theme-automne   { --primaire: #4A2414; --profond: #36190D; --sombre: #26110A; --accent: #E3893A; --accent-clair: #F3C79C; --sur-accent: #26110A; --clair: #F0EAE3; --second: #4F4F1E; }
.theme-noel      { --primaire: #123D2C; --profond: #0C2E20; --sombre: #081F16; --accent: #D9B45A; --accent-clair: #EFDDAA; --sur-accent: #1B1405; --clair: #EFEDE8; --second: #7A1620; }
.theme-paques    { --primaire: #4A3270; --profond: #382456; --sombre: #281A40; --accent: #F6D365; --accent-clair: #FBEAB0; --sur-accent: #2E2209; --clair: #F3EFF8; --second: #3E6B4F; }
.theme-halloween { --primaire: #26152F; --profond: #1B0E22; --sombre: #120A17; --accent: #F08A24; --accent-clair: #F8C38C; --sur-accent: #1B0E22; --clair: #ECE8EE; --second: #3A1B45; }
.theme-rose      { --primaire: #8A2050; --profond: #6C173D; --sombre: #4E0F2B; --accent: #F7B3CE; --accent-clair: #FCDCE8; --sur-accent: #4E0F2B; --clair: #F7EEF2; --second: #5B2C4A; }

/* Quand il n'y a pas de pizza du moment, la section suivant le haut de page est la carte */
.sans-moment { --apres-hero: var(--sombre); }

/* Les décorations passent derrière le contenu du haut de page */
.hero { position: relative; }
.hero > .cadre { position: relative; z-index: 1; }
.sceau { position: relative; z-index: 1; }

/* ---------- Particules qui tombent ---------- */
.deco-chute { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.deco-chute i {
  position: absolute; top: -6%; display: block;
  width: var(--t); height: var(--t);
  animation: deco-chute var(--d) linear var(--r) infinite;
  will-change: top, transform;
}
@keyframes deco-chute {
  from { top: -6%; transform: translateX(0) rotate(0deg); }
  to   { top: 104%; transform: translateX(var(--x)) rotate(320deg); }
}
.deco-neige i { border-radius: 50%; background: radial-gradient(circle, #fff 0 42%, rgba(255,255,255,0) 72%); opacity: .9; }
.deco-neige i.v2 { opacity: .55; transform: scale(.7); }
.deco-petales i { height: calc(var(--t) * .75); border-radius: 150% 0 150% 0; background: linear-gradient(135deg, #FDE2E9, #F2A5B8); opacity: .9; }
.deco-petales i.v2 { background: linear-gradient(135deg, #fff, #F7C6D3); }
.deco-feuilles i { width: calc(var(--t) * 1.7); height: calc(var(--t) * 1.7); background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 4C44 14 52 28 46 42C42 51 34 55 30 56C26 55 18 51 14 42C8 28 16 14 30 4Z' fill='%23D96B27'/%3E%3Cpath d='M30 10V58' stroke='%237A3510' stroke-width='2'/%3E%3C/svg%3E"); }
.deco-feuilles i.v2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 4C44 14 52 28 46 42C42 51 34 55 30 56C26 55 18 51 14 42C8 28 16 14 30 4Z' fill='%23B23A1E'/%3E%3Cpath d='M30 10V58' stroke='%23601A0C' stroke-width='2'/%3E%3C/svg%3E"); }
.deco-feuilles i.v3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 4C44 14 52 28 46 42C42 51 34 55 30 56C26 55 18 51 14 42C8 28 16 14 30 4Z' fill='%23E2A93B'/%3E%3Cpath d='M30 10V58' stroke='%23855A12' stroke-width='2'/%3E%3C/svg%3E"); }
.deco-confettis i { width: calc(var(--t) * .7); height: calc(var(--t) * .7); border-radius: 50%; background: #F7B7C9; }
.deco-confettis i.v2 { background: #A8D8B9; border-radius: 2px; }
.deco-confettis i.v3 { background: #F6D365; }
.deco-coeurs i { width: auto; height: auto; animation-direction: reverse; color: #F7B3CE; font-style: normal; font-size: calc(var(--t) * 1.5); line-height: 1; opacity: .75; }
.deco-coeurs i::before { content: "\2665"; }
.deco-coeurs i.v2 { color: #fff; opacity: .5; }

/* ---------- Bord bas du haut de page : congère (neige) ou vagues ---------- */
.hero:has(.deco-bord) { padding-bottom: 6.5rem; }
.deco-bord { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 56px; display: block; z-index: 0; fill: var(--apres-hero); }
.deco-vagues .vague-2 { opacity: .45; }

/* ---------- Été : rayons de soleil derrière le sceau ---------- */
.deco-soleil {
  position: absolute; left: 50%; top: 50%; width: 125%; aspect-ratio: 1 / 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 30%, transparent) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%);
          mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  animation: deco-tourne 120s linear infinite;
}
@keyframes deco-tourne { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---------- Noël : guirlande lumineuse sous l'en-tête ---------- */
.deco-guirlande {
  position: relative; display: flex; justify-content: space-between;
  height: 30px; padding: 0 12px; background: var(--primaire); overflow: hidden;
}
.deco-guirlande::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: rgba(0,0,0,.45); }
.deco-guirlande span {
  position: relative; width: 9px; height: 13px; margin-top: 9px; border-radius: 50% 50% 45% 45%;
  background: #E5484D; box-shadow: 0 0 9px 1px currentColor; color: #E5484D;
  animation: deco-clignote 1.8s ease-in-out infinite alternate;
}
.deco-guirlande span::before { content: ""; position: absolute; left: 2px; top: -4px; width: 5px; height: 5px; border-radius: 1px; background: #2A2A2A; }
.deco-guirlande span:nth-child(4n+2) { background: #F2C14E; color: #F2C14E; animation-delay: -.9s; }
.deco-guirlande span:nth-child(4n+3) { background: #3FA34D; color: #3FA34D; animation-delay: -.45s; }
.deco-guirlande span:nth-child(4n+4) { background: #4C8FE0; color: #4C8FE0; animation-delay: -1.35s; }
@keyframes deco-clignote { from { opacity: .45; box-shadow: none; } to { opacity: 1; } }

/* ---------- Pâques : œufs au pied du sceau ---------- */
.deco-oeufs { position: absolute; z-index: 2; left: 4%; bottom: -4%; display: flex; align-items: flex-end; }
.deco-oeufs svg { width: 58px; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.deco-oeufs svg:nth-child(1) { transform: rotate(-14deg); }
.deco-oeufs svg:nth-child(2) { width: 70px; margin: 0 -10px; z-index: 1; }
.deco-oeufs svg:nth-child(3) { transform: rotate(12deg); }

/* ---------- Halloween : toile, lune, chauves-souris ---------- */
.deco-toile-boite { position: absolute; top: 0; left: 0; width: 210px; z-index: 0; color: rgba(255,255,255,.22); pointer-events: none; }
.deco-toile { display: block; width: 100%; height: auto; }
.deco-lune {
  position: absolute; z-index: 0; top: 34px; right: 5%; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #FFF6DC, #EBD9A8 70%);
  box-shadow: 0 0 40px 8px rgba(255, 236, 180, .22);
}
.deco-cs { position: absolute; z-index: 0; width: 62px; fill: #0A050D; left: -60px; animation: deco-vol 22s linear infinite; }
.deco-cs.cs1 { top: 16%; }
.deco-cs.cs2 { top: 40%; width: 44px; animation-duration: 30s; animation-delay: -12s; }
.deco-cs.cs3 { top: 66%; width: 52px; animation-duration: 26s; animation-delay: -20s; }
@keyframes deco-vol {
  0%   { transform: translate(0, 0) scaleY(1); }
  25%  { transform: translate(28vw, -26px) scaleY(.7); }
  50%  { transform: translate(56vw, 10px) scaleY(1); }
  75%  { transform: translate(84vw, -18px) scaleY(.7); }
  100% { transform: translate(112vw, 0) scaleY(1); }
}

/* ---------- Octobre Rose : ruban à côté du sceau ---------- */
.deco-ruban { position: absolute; z-index: 2; left: 2%; bottom: -2%; width: 74px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.deco-ruban svg { display: block; width: 100%; height: auto; }

/* ---------- Ornement dans le coin de la pizza du moment ---------- */
.deco-carte { position: absolute; z-index: 3; top: -26px; right: -22px; width: 64px; color: var(--accent); filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); pointer-events: none; }
.deco-carte svg { display: block; width: 100%; height: auto; }
.deco-carte-large { width: 84px; top: -34px; right: -28px; }
.deco-carte-flocon { color: #fff; }

/* ---------- Téléphone et mouvement réduit ---------- */
@media (max-width: 720px) {
  .m-cache, .deco-lune { display: none; }
  .deco-guirlande span:nth-child(n+16) { display: none; }
  .deco-toile-boite { width: 130px; }
  .deco-carte { right: -8px; top: -22px; width: 52px; }
  .deco-carte-large { width: 66px; }
  .deco-oeufs svg { width: 44px; }
  .deco-oeufs svg:nth-child(2) { width: 54px; }
  .deco-ruban { width: 56px; }
  .deco-bord { height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .deco-chute, .deco-cs { display: none; }
  .deco-soleil, .deco-guirlande span { animation: none; }
}

/* =====================================================================
   Scènes illustrées (bas du haut de page) et personnages
   ===================================================================== */
.hero.a-scene { padding-bottom: 250px; }
.deco-scene { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 260px; display: block; z-index: 0; pointer-events: none; }
.deco-scene .sol { fill: var(--apres-hero); }

/* Noël : traîneau du Père Noël qui traverse le ciel */
.deco-traineau { position: absolute; z-index: 0; top: 12%; left: -280px; width: 250px; animation: deco-traineau 26s linear infinite; }
@keyframes deco-traineau {
  0%   { transform: translate(0, 0) rotate(-3deg); }
  50%  { transform: translate(60vw, -24px) rotate(2deg); }
  100% { transform: translate(125vw, 6px) rotate(-3deg); }
}

/* Halloween : sorcière, araignée, deuxième toile */
.deco-sorciere { position: absolute; z-index: 0; top: 8%; left: -200px; width: 170px; animation: deco-sorciere 30s linear infinite; animation-delay: -6s; }
@keyframes deco-sorciere {
  0%   { transform: translate(0, 30px) rotate(-6deg); }
  30%  { transform: translate(40vw, -10px) rotate(4deg); }
  60%  { transform: translate(80vw, 20px) rotate(-4deg); }
  100% { transform: translate(125vw, -20px) rotate(-8deg); }
}
.deco-toile-droite { left: auto; right: 0; transform: scaleX(-1); }
.deco-lune { right: 14%; top: 46px; }
.deco-araignee-boite { position: absolute; z-index: 0; top: 0; left: 44%; width: 34px; transform-origin: top center; animation: deco-araignee 5s ease-in-out infinite alternate; }
.deco-araignee-boite svg { display: block; width: 100%; height: auto; }
.deco-araignee-boite.fixe { animation: none; }
@keyframes deco-araignee { from { transform: translateY(-30px); } to { transform: translateY(10px); } }

/* Été : mouettes */
.deco-mouettes { position: absolute; z-index: 0; top: 14%; left: 30%; width: 130px; animation: deco-mouettes 14s ease-in-out infinite alternate; }
@keyframes deco-mouettes { from { transform: translate(0, 0); } to { transform: translate(18vw, -18px); } }

/* Printemps et Pâques : branche de cerisier, papillons */
.deco-branche-boite { position: absolute; z-index: 0; top: 0; right: 0; width: 320px; pointer-events: none; transform: scaleX(-1); }
.deco-branche-boite svg { display: block; width: 100%; height: auto; }
.deco-papillon { position: absolute; z-index: 0; width: 34px; top: 30%; left: 8%; animation: deco-papillon 18s ease-in-out infinite alternate; }
.deco-papillon + .deco-papillon { top: 58%; left: 40%; width: 26px; animation-duration: 22s; animation-delay: -7s; }
.deco-papillon .ailes { transform-origin: center; animation: deco-ailes .35s ease-in-out infinite alternate; }
@keyframes deco-ailes { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@keyframes deco-papillon {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(18vw, -40px); }
  66%  { transform: translate(34vw, 20px); }
  100% { transform: translate(52vw, -30px); }
}

@media (max-width: 720px) {
  .hero.a-scene { padding-bottom: 150px; }
  .deco-scene { height: 150px; }
  .deco-traineau { width: 170px; top: 6%; }
  .deco-sorciere { width: 120px; top: 4%; }
  .deco-branche-boite { width: 180px; }
  .deco-toile-droite { display: none; }
  .deco-araignee-boite { left: 78%; width: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .deco-traineau, .deco-sorciere, .deco-mouettes, .deco-papillon { display: none; }
  .deco-araignee-boite { animation: none; }
}

/* =====================================================================
   Thème Parchemin : fond clair façon papier, en-tête bois, texte brun.
   C'est le seul thème clair : il redéfinit les couleurs de texte.
   ===================================================================== */
.theme-parchemin {
  --primaire: #5A3A22; --profond: #F3E8D6; --sombre: #EFE3CF;
  --accent: #9C3D22; --accent-clair: #B4512F; --sur-accent: #FFFFFF;
  --clair: #EFE3CF; --second: #6E4A2C;
  --encre: #3B2A1E; --gris: #6E5A48; --ligne: rgba(90, 58, 34, .2);
  --surface: #FBF5EA; --apres-hero: #EFE3CF;
}
.theme-parchemin body { background: #EFE3CF; color: var(--encre); }
.theme-parchemin .entete { border-bottom: 0; }
.theme-parchemin .hero { background: var(--primaire); border-bottom: 6px solid #3E2716; box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); }
.theme-parchemin .hero.a-scene { border-bottom: 0; }

/* Cartes claires, texte foncé */
.theme-parchemin .moment-carte { color: var(--encre); box-shadow: 0 22px 44px -26px rgba(70, 40, 20, .45); }
.theme-parchemin .moment-desc { color: var(--gris); }
.theme-parchemin .moment-prix { color: var(--accent); }
.theme-parchemin .carte { color: var(--encre); }
.theme-parchemin .carte-intro { color: var(--gris); }
.theme-parchemin .carte-lien a, .theme-parchemin .lien { color: var(--accent); }
.theme-parchemin .planche { box-shadow: 0 22px 44px -26px rgba(70, 40, 20, .45); }
.theme-parchemin .planche::before { border-color: var(--ligne); }
.theme-parchemin .onglets button { color: var(--encre); border-color: var(--ligne); }
.theme-parchemin .onglets button:hover { color: var(--accent); border-color: var(--accent); }
.theme-parchemin .rubrique-titre, .theme-parchemin .met-prix, .theme-parchemin .horaires tr.aujourdhui th, .theme-parchemin .horaires tr.aujourdhui td { color: var(--accent); }
.theme-parchemin .met-points { border-bottom-color: rgba(90, 58, 34, .3); }
.theme-parchemin .met-photo { box-shadow: 0 0 0 1px var(--ligne), 0 10px 22px -12px rgba(70, 40, 20, .4); }
.theme-parchemin .met-photo-vide { background-color: rgba(90, 58, 34, .05); }
.theme-parchemin .plan { background: rgba(255, 255, 255, .5); }
.theme-parchemin .pastille-met.epice { background: rgba(156, 61, 34, .12); color: var(--accent); }
.theme-parchemin .pastille-met.nouveau { background: var(--accent); color: #fff; }
.theme-parchemin .bouton-or { background: var(--accent); color: #fff; }
.theme-parchemin .bouton-or:hover { background: var(--accent-clair); }
.theme-parchemin .commande-mobile { background: var(--accent); color: #fff; }
.theme-parchemin .onglets button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Présentation réglée sur « Couleur du thème » : fond clair, donc texte foncé */
.theme-parchemin .pres-carte[style*="--pres-fond:var(--profond)"] { --pres-fond: #FBF5EA; --pres-texte: #3B2A1E; --pres-doux: #5A4A3E; --pres-accent: #9C3D22; }