/* ====================================================
   DAMEYO — backgrounds.css
   Illustrations SVG thématiques — une scène unique
   par section et par thème, toutes positionnées
   différemment avec rotations variées.
   Opacité intégrée dans le SVG (7-9%)
   Aucune image externe — zéro requête réseau
==================================================== */

/* Base commune */
html[class*='theme-'] .intro,
html[class*='theme-'] .menu-section,
html[class*='theme-'] .offers,
html[class*='theme-'] .reviews,
html[class*='theme-'] .contact {
  background-repeat : no-repeat;
}


/* ====================================================
   NOËL
==================================================== */

/* Sapin décoré */
html.theme-noel .intro {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 480'> <g opacity='0.08' transform='rotate(-12 170 240)'> <rect x='158' y='400' width='24' height='70' rx='3' fill='%23795548'/> <polygon points='170,10 90,140 250,140' fill='%232E7D32'/> <polygon points='170,70 75,210 265,210' fill='%23388E3C'/> <polygon points='170,140 55,300 285,300' fill='%232E7D32'/> <polygon points='170,210 38,400 302,400' fill='%23388E3C'/> <circle cx='128' cy='155' r='11' fill='%23C62828'/> <circle cx='215' cy='148' r='9' fill='%23F9A825'/> <circle cx='105' cy='265' r='12' fill='%23F9A825'/> <circle cx='242' cy='258' r='10' fill='%23C62828'/> <circle cx='148' cy='320' r='9' fill='%23C62828'/> <circle cx='198' cy='335' r='11' fill='%23F9A825'/> <polygon points='170,0 176,18 195,18 180,28 186,46 170,36 154,46 160,28 145,18 164,18' fill='%23F9A825'/> <rect x='68' y='415' width='44' height='36' rx='3' fill='%23C62828'/> <rect x='88' y='406' width='4' height='45' fill='%23F9A825'/> <rect x='68' y='430' width='44' height='4' fill='%23F9A825'/> <rect x='220' y='420' width='52' height='32' rx='3' fill='%231565C0'/> <rect x='244' y='410' width='4' height='42' fill='%23F9A825'/> <rect x='220' y='434' width='52' height='4' fill='%23F9A825'/> <ellipse cx='170' cy='470' rx='160' ry='16' fill='%23E3F2FD' opacity='0.6'/> </g></svg>");
  background-position : calc(100% + 100px) calc(100% + 100px);
  background-size     : 380px;
}

/* Bonhomme de neige */
html.theme-noel .menu-section {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 400'> <g opacity='0.07' transform='rotate(8 140 200)'> <ellipse cx='140' cy='320' rx='80' ry='70' fill='%23ECEFF1'/> <ellipse cx='140' cy='180' rx='55' ry='55' fill='%23ECEFF1'/> <ellipse cx='140' cy='55' rx='38' ry='38' fill='%23ECEFF1'/> <circle cx='125' cy='46' r='5' fill='%23263238'/> <circle cx='155' cy='46' r='5' fill='%23263238'/> <ellipse cx='140' cy='60' rx='10' ry='6' fill='%23F57C00'/> <circle cx='140' cy='165' r='5' fill='%23263238'/> <circle cx='140' cy='182' r='5' fill='%23263238'/> <circle cx='140' cy='199' r='5' fill='%23263238'/> <rect x='60' y='170' width='55' height='10' rx='5' fill='%23795548' transform='rotate(-30 87 175)'/> <rect x='165' y='155' width='55' height='10' rx='5' fill='%23795548' transform='rotate(30 192 160)'/> <rect x='127' y='0' width='26' height='35' rx='4' fill='%23C62828'/> <ellipse cx='140' cy='0' rx='22' ry='8' fill='%23C62828'/> <line x1='125' y1='18' x2='118' y2='12' stroke='%23F9A825' stroke-width='2'/> <circle cx='126' cy='316' r='6' fill='%231565C0'/> <circle cx='148' cy='340' r='5' fill='%23C62828'/> <circle cx='160' cy='310' r='6' fill='%231565C0'/> </g></svg>");
  background-position : -90px -70px;
  background-size     : 440px;
}

/* Boules suspendues */
html.theme-noel .offers {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 500'> <g opacity='0.08' transform='rotate(-5 100 250)'> <line x1='60' y1='0' x2='60' y2='80' stroke='%23795548' stroke-width='2'/> <line x1='100' y1='0' x2='100' y2='50' stroke='%23795548' stroke-width='2'/> <line x1='140' y1='0' x2='140' y2='100' stroke='%23795548' stroke-width='2'/> <line x1='30' y1='0' x2='30' y2='130' stroke='%23795548' stroke-width='2'/> <line x1='170' y1='0' x2='170' y2='70' stroke='%23795548' stroke-width='2'/> <circle cx='60' cy='115' r='35' fill='%23C62828'/> <rect x='53' y='78' width='14' height='8' rx='3' fill='%23F9A825'/> <circle cx='100' cy='90' r='28' fill='%23F9A825'/> <rect x='94' y='50' width='12' height='7' rx='2' fill='%23F9A825'/> <circle cx='140' cy='138' r='32' fill='%231565C0'/> <rect x='134' y='100' width='12' height='7' rx='2' fill='%23F9A825'/> <circle cx='30' cy='168' r='25' fill='%23F9A825'/> <rect x='25' y='130' width='10' height='6' rx='2' fill='%23F9A825'/> <circle cx='170' cy='108' r='30' fill='%232E7D32'/> <rect x='164' y='70' width='12' height='7' rx='2' fill='%23F9A825'/> <circle cx='80' cy='270' r='38' fill='%232E7D32'/> <rect x='73' y='230' width='14' height='8' rx='3' fill='%23F9A825'/> <line x1='80' y1='0' x2='80' y2='232' stroke='%23795548' stroke-width='2'/> <circle cx='150' cy='320' r='30' fill='%23C62828'/> <rect x='144' y='288' width='12' height='7' rx='2' fill='%23F9A825'/> <line x1='150' y1='0' x2='150' y2='290' stroke='%23795548' stroke-width='2'/> </g></svg>");
  background-position : calc(100% + 80px) center;
  background-size     : 360px;
}

/* Cheminée + chaussettes */
html.theme-noel .reviews {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'> <g opacity='0.08' transform='rotate(15 180 150)'> <rect x='20' y='100' width='320' height='200' rx='4' fill='%23795548'/> <rect x='60' y='120' width='240' height='180' rx='4' fill='%231A1A1A'/> <ellipse cx='180' cy='300' rx='100' ry='30' fill='%23E64A19' opacity='0.8'/> <ellipse cx='180' cy='280' rx='70' ry='40' fill='%23F57C00'/> <ellipse cx='165' cy='255' rx='35' ry='50' fill='%23F57C00'/> <ellipse cx='195' cy='260' rx='28' ry='42' fill='%23FFCA28'/> <ellipse cx='178' cy='248' rx='18' ry='35' fill='%23FFEE58'/> <rect x='20' y='85' width='320' height='25' rx='4' fill='%235D4037'/> <path d='M80 85 Q90 60 85 40' stroke='%23607D8B' stroke-width='3' fill='none'/> <path d='M280 85 Q290 55 285 35' stroke='%23607D8B' stroke-width='3' fill='none'/> <path d='M130 85 Q160 20 140 0' stroke='%23546E7A' stroke-width='4' fill='none'/> <rect x='75' y='40' width='22' height='50' rx='8' fill='%23C62828'/> <ellipse cx='86' cy='95' rx='12' ry='6' fill='%23F9A825'/> <path d='M75 45 L86 25 L97 45' fill='%23C62828'/> <rect x='260' y='30' width='20' height='55' rx='8' fill='%231565C0'/> <ellipse cx='270' cy='88' rx='11' ry='5' fill='%23F9A825'/> <path d='M260 35 L270 15 L280 35' fill='%231565C0'/> </g></svg>");
  background-position : -90px calc(100% + 90px);
  background-size     : 340px;
}

/* Village enneigé */
html.theme-noel .contact {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 280'> <g opacity='0.07' transform='rotate(-18 210 140)'> <ellipse cx='210' cy='270' rx='210' ry='25' fill='%23E3F2FD'/> <rect x='30' y='160' width='80' height='110' rx='3' fill='%23ECEFF1'/> <polygon points='30,160 70,100 110,160' fill='%23EF5350'/> <rect x='55' y='200' width='30' height='70' rx='2' fill='%23795548'/> <rect x='40' y='170' width='22' height='20' rx='2' fill='%23BBDEFB'/> <rect x='80' y='170' width='22' height='20' rx='2' fill='%23BBDEFB'/> <rect x='160' y='130' width='100' height='140' rx='3' fill='%23ECEFF1'/> <polygon points='155,135 210,65 265,135' fill='%231565C0'/> <rect x='195' y='195' width='30' height='75' rx='2' fill='%23795548'/> <rect x='165' y='150' width='28' height='26' rx='2' fill='%23BBDEFB'/> <rect x='225' y='150' width='28' height='26' rx='2' fill='%23BBDEFB'/> <rect x='300' y='175' width='70' height='95' rx='3' fill='%23ECEFF1'/> <polygon points='295,178 335,120 375,178' fill='%232E7D32'/> <rect x='320' y='225' width='24' height='45' rx='2' fill='%23795548'/> <circle cx='80' cy='55' r='6' fill='%23F9A825'/> <circle cx='95' cy='40' r='4' fill='%23F9A825'/> <circle cx='65' cy='35' r='5' fill='%23F9A825'/> <circle cx='340' cy='45' r='5' fill='%23F9A825'/> <circle cx='360' cy='30' r='3' fill='%23F9A825'/> </g></svg>");
  background-position : calc(100% + 60px) -80px;
  background-size     : 310px;
}


/* ====================================================
   GALETTE DES ROIS
==================================================== */

/* Galette vue du dessus */
html.theme-galette .intro {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 380'> <g opacity='0.09' transform='rotate(-20 190 190)'> <circle cx='190' cy='220' r='155' fill='%23D4A017'/> <circle cx='190' cy='220' r='135' fill='none' stroke='%23A07010' stroke-width='3' stroke-dasharray='10,7'/> <circle cx='190' cy='220' r='95' fill='none' stroke='%23A07010' stroke-width='2' stroke-dasharray='7,5'/> <path d='M55 220 L190 85 L325 220 L190 355Z' fill='none' stroke='%23A07010' stroke-width='2.5' opacity='0.6'/> <ellipse cx='240' cy='245' rx='18' ry='13' fill='%23FFFDE7' opacity='0.7' transform='rotate(-25 240 245)'/> <rect x='105' y='25' width='170' height='52' rx='6' fill='%23D4A017'/> <polygon points='105,25 128,−20 152,25' fill='%23D4A017'/> <polygon points='167,25 190,−24 213,25' fill='%23D4A017'/> <polygon points='228,25 252,−20 275,25' fill='%23D4A017'/> <circle cx='128' cy='45' r='9' fill='%23C62828'/> <circle cx='190' cy='43' r='10' fill='%231565C0'/> <circle cx='252' cy='45' r='9' fill='%232E7D32'/> <circle cx='160' cy='45' r='5' fill='%23D4A017'/> <circle cx='220' cy='45' r='5' fill='%23D4A017'/> </g></svg>");
  background-position : calc(100% + 100px) calc(100% + 100px);
  background-size     : 380px;
}

/* Couronne avec joyaux */
html.theme-galette .menu-section {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'> <g opacity='0.09' transform='rotate(14 150 110)'> <polygon points='20,180 20,80 75,20 130,80 150,40 170,80 225,20 280,80 280,180' fill='%23D4A017'/> <rect x='20' y='155' width='260' height='30' rx='4' fill='%23C8940A'/> <circle cx='75' cy='50' r='14' fill='%23C62828'/> <circle cx='150' cy='42' r='16' fill='%231565C0'/> <circle cx='225' cy='50' r='14' fill='%232E7D32'/> <circle cx='38' cy='120' r='10' fill='%23F9A825'/> <circle cx='262' cy='120' r='10' fill='%23F9A825'/> <rect x='35' y='158' width='230' height='6' rx='3' fill='%23F9A825' opacity='0.6'/> <circle cx='80' cy='175' r='7' fill='%23F9A825' opacity='0.5'/> <circle cx='150' cy='178' r='8' fill='%23F9A825' opacity='0.5'/> <circle cx='220' cy='175' r='7' fill='%23F9A825' opacity='0.5'/> </g></svg>");
  background-position : -90px -70px;
  background-size     : 440px;
}

/* Chandelier */
html.theme-galette .offers {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 420'> <g opacity='0.08' transform='rotate(-8 130 210)'> <line x1='130' y1='0' x2='130' y2='80' stroke='%23C8940A' stroke-width='4'/> <ellipse cx='130' cy='90' rx='80' ry='18' fill='%23D4A017'/> <line x1='60' y1='90' x2='40' y2='160' stroke='%23C8940A' stroke-width='3'/> <line x1='200' y1='90' x2='220' y2='160' stroke='%23C8940A' stroke-width='3'/> <line x1='130' y1='90' x2='130' y2='160' stroke='%23C8940A' stroke-width='3'/> <line x1='90' y1='90' x2='70' y2='160' stroke='%23C8940A' stroke-width='3'/> <line x1='170' y1='90' x2='190' y2='160' stroke='%23C8940A' stroke-width='3'/> <ellipse cx='40' cy='165' rx='12' ry='8' fill='%23D4A017'/> <ellipse cx='70' cy='165' rx='12' ry='8' fill='%23D4A017'/> <ellipse cx='130' cy='165' rx='12' ry='8' fill='%23D4A017'/> <ellipse cx='190' cy='165' rx='12' ry='8' fill='%23D4A017'/> <ellipse cx='220' cy='165' rx='12' ry='8' fill='%23D4A017'/> <rect x='35' y='145' width='10' height='22' rx='4' fill='%23FFFDE7'/> <rect x='65' y='148' width='10' height='22' rx='4' fill='%23FFFDE7'/> <rect x='125' y='143' width='10' height='24' rx='4' fill='%23FFFDE7'/> <rect x='185' y='148' width='10' height='22' rx='4' fill='%23FFFDE7'/> <rect x='215' y='145' width='10' height='22' rx='4' fill='%23FFFDE7'/> <ellipse cx='40' cy='145' rx='5' ry='8' fill='%23F57C00' opacity='0.8'/> <ellipse cx='70' cy='148' rx='5' ry='8' fill='%23F57C00' opacity='0.8'/> <ellipse cx='130' cy='143' rx='5' ry='9' fill='%23F57C00' opacity='0.8'/> <ellipse cx='190' cy='148' rx='5' ry='8' fill='%23F57C00' opacity='0.8'/> <ellipse cx='220' cy='145' rx='5' ry='8' fill='%23F57C00' opacity='0.8'/> <path d='M20 230 Q130 190 240 230 Q220 300 130 320 Q40 300 20 230Z' fill='%23D4A017' opacity='0.5'/> <ellipse cx='130' cy='370' rx='90' ry='50' fill='%23D4A017' opacity='0.3'/> </g></svg>");
  background-position : calc(100% + 80px) center;
  background-size     : 360px;
}

/* Table de l'épiphanie */
html.theme-galette .reviews {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 320'> <g opacity='0.08' transform='rotate(22 200 160)'> <rect x='50' y='140' width='300' height='180' rx='6' fill='%23D4A017' opacity='0.5'/> <ellipse cx='200' cy='140' rx='150' ry='25' fill='%23C8940A'/> <ellipse cx='200' cy='140' rx='140' ry='20' fill='%23D4A017'/> <circle cx='200' cy='140' rx='140' ry='140'/> <path d='M80,140 Q110,90 140,140 Q170,90 200,140 Q230,90 260,140 Q290,90 320,140' fill='none' stroke='%23A07010' stroke-width='3'/> <ellipse cx='155' cy='165' rx='15' ry='11' fill='%23FFFDE7' opacity='0.8' transform='rotate(-30 155 165)'/> <text x='65' y='230' font-size='32' fill='%23A07010' opacity='0.6' font-family='serif'>Galette</text> <text x='90' y='268' font-size='24' fill='%23A07010' opacity='0.4' font-family='serif'>des Rois</text> <circle cx='80' cy='100' r='18' fill='%23D4A017'/> <circle cx='80' cy='100' r='10' fill='%23C8940A'/> <circle cx='200' cy='72' r='14' fill='%23D4A017'/> <circle cx='200' cy='72' r='8' fill='%23C8940A'/> <circle cx='320' cy='95' r='16' fill='%23D4A017'/> <circle cx='320' cy='95' r='9' fill='%23C8940A'/> </g></svg>");
  background-position : -90px calc(100% + 90px);
  background-size     : 340px;
}

/* Couronne de roi */
html.theme-galette .contact {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'> <g opacity='0.08' transform='rotate(-14 150 200)'> <rect x='60' y='200' width='180' height='250' rx='6' fill='%238B6914'/> <polygon points='60,200 80,130 105,200' fill='%23D4A017'/> <polygon points='125,200 150,110 175,200' fill='%23D4A017'/> <polygon points='195,200 220,130 240,200' fill='%23D4A017'/> <rect x='55' y='195' width='190' height='30' rx='5' fill='%23C8940A'/> <circle cx='80' cy='148' r='13' fill='%23C62828'/> <circle cx='150' cy='135' r='16' fill='%231565C0'/> <circle cx='220' cy='145' r='13' fill='%232E7D32'/> <circle cx='115' cy='200' r='9' fill='%23F9A825'/> <circle cx='185' cy='200' r='9' fill='%23F9A825'/> <rect x='75' y='232' width='150' height='4' rx='2' fill='%23F9A825' opacity='0.5'/> <rect x='75' y='258' width='150' height='4' rx='2' fill='%23F9A825' opacity='0.5'/> <rect x='75' y='284' width='150' height='4' rx='2' fill='%23F9A825' opacity='0.5'/> <ellipse cx='150' cy='420' rx='80' ry='14' fill='%23C8940A' opacity='0.4'/> </g></svg>");
  background-position : calc(100% + 60px) -80px;
  background-size     : 310px;
}


/* ====================================================
   RAMADAN
==================================================== */

/* Mosquée + minarets */
html.theme-ramadan .intro {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 480'> <g opacity='0.08' fill='%23D4A843'> <rect x='0' y='420' width='400' height='60' rx='0'/> <rect x='85' y='265' width='230' height='155' rx='4'/> <ellipse cx='200' cy='265' rx='88' ry='66'/> <rect x='178' y='330' width='44' height='95' rx='22 22 0 0' fill='%230C0A1E'/> <rect x='74' y='205' width='26' height='215' rx='4'/> <ellipse cx='87' cy='205' rx='15' ry='24'/> <rect x='300' y='205' width='26' height='215' rx='4'/> <ellipse cx='313' cy='205' rx='15' ry='24'/> <ellipse cx='125' cy='272' rx='35' ry='27'/> <ellipse cx='275' cy='272' rx='35' ry='27'/> <circle cx='200' cy='68' r='42'/> <circle cx='218' cy='56' r='34' fill='%2306050F'/> <polygon points='258,48 262,60 275,60 265,67 269,80 258,72 247,80 251,67 241,60 254,60' /> <rect x='148' y='178' width='13' height='20' rx='3' fill='%238B5CF6'/> <ellipse cx='154' cy='178' rx='8' ry='4'/> <rect x='239' y='178' width='13' height='20' rx='3' fill='%238B5CF6'/> <ellipse cx='245' cy='178' rx='8' ry='4'/> <path d='M154 176 Q200 164 245 176' stroke='%23D4A843' stroke-width='1.5' fill='none'/> </g></svg>");
  background-position : calc(100% + 100px) calc(100% + 100px);
  background-size     : 380px;
}

/* Lanterne orientale */
html.theme-ramadan .menu-section {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 480'> <g opacity='0.08' fill='%23D4A843' transform='rotate(-6 100 240)'> <line x1='100' y1='0' x2='100' y2='40' stroke='%23D4A843' stroke-width='3'/> <polygon points='65,40 135,40 150,80 50,80' /> <rect x='52' y='78' width='96' height='220' rx='8'/> <polygon points='50,298 150,298 140,340 60,340'/> <rect x='75' y='340' width='50' height='30' rx='4'/> <ellipse cx='100' cy='380' rx='28' ry='10' opacity='0.5'/> <line x1='68' y1='100' x2='68' y2='298' stroke='%23F4D03F' stroke-width='1.5' opacity='0.4'/> <line x1='100' y1='100' x2='100' y2='298' stroke='%23F4D03F' stroke-width='1.5' opacity='0.4'/> <line x1='132' y1='100' x2='132' y2='298' stroke='%23F4D03F' stroke-width='1.5' opacity='0.4'/> <line x1='52' y1='160' x2='148' y2='160' stroke='%23F4D03F' stroke-width='1.5' opacity='0.4'/> <line x1='52' y1='220' x2='148' y2='220' stroke='%23F4D03F' stroke-width='1.5' opacity='0.4'/> <ellipse cx='100' cy='198' rx='22' ry='22' fill='%23F4D03F' opacity='0.5'/> <ellipse cx='100' cy='198' rx='12' ry='12' fill='%23FFFDE7' opacity='0.8'/> </g></svg>");
  background-position : -90px -70px;
  background-size     : 440px;
}

/* Croissant de lune */
html.theme-ramadan .offers {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'> <g opacity='0.09' transform='rotate(10 160 160)'> <circle cx='160' cy='160' r='100' fill='%23D4A843'/> <circle cx='192' cy='135' r='82' fill='%2306050F'/> <polygon points='240,80 246,98 265,98 250,109 256,128 240,116 224,128 230,109 215,98 234,98' fill='%23D4A843'/> <polygon points='80,220 84,232 96,232 87,239 90,251 80,244 70,251 73,239 64,232 76,232' fill='%23D4A843' opacity='0.7'/> <circle cx='270' cy='220' r='4' fill='%23D4A843' opacity='0.6'/> <circle cx='50' cy='80' r='6' fill='%23D4A843' opacity='0.5'/> <circle cx='290' cy='80' r='3' fill='%23D4A843' opacity='0.4'/> <circle cx='30' cy='250' r='5' fill='%238B5CF6' opacity='0.5'/> <path d='M20 160 Q40 140 60 160 Q40 180 20 160Z' fill='%238B5CF6' opacity='0.3'/> <path d='M260 280 Q280 260 300 280 Q280 300 260 280Z' fill='%238B5CF6' opacity='0.3'/> </g></svg>");
  background-position : calc(100% + 80px) center;
  background-size     : 360px;
}

/* Étoiles géométriques */
html.theme-ramadan .reviews {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 380'> <g opacity='0.08' transform='rotate(-12 210 190)'> <polygon points='80,60 86,78 105,78 90,90 96,108 80,96 64,108 70,90 55,78 74,78' fill='%23D4A843'/> <polygon points='200,20 207,42 230,42 212,56 219,78 200,64 181,78 188,56 170,42 193,42' fill='%23D4A843'/> <polygon points='340,80 346,98 365,98 350,110 356,128 340,116 324,128 330,110 315,98 334,98' fill='%23D4A843'/> <polygon points='60,200 65,214 80,214 68,223 73,237 60,228 47,237 52,223 40,214 55,214' fill='%238B5CF6'/> <polygon points='360,200 365,214 380,214 368,223 373,237 360,228 347,237 352,223 340,214 355,214' fill='%238B5CF6'/> <polygon points='150,300 156,318 175,318 160,330 166,348 150,336 134,348 140,330 125,318 144,318' fill='%23D4A843'/> <polygon points='280,310 284,322 297,322 287,329 291,341 280,334 269,341 273,329 263,322 276,322' fill='%238B5CF6'/> <circle cx='115' cy='150' r='3' fill='%23D4A843' opacity='0.5'/> <circle cx='305' cy='145' r='4' fill='%23D4A843' opacity='0.5'/> <circle cx='200' cy='240' r='3' fill='%238B5CF6' opacity='0.4'/> <circle cx='40' cy='310' r='5' fill='%23D4A843' opacity='0.4'/> <circle cx='380' cy='300' r='4' fill='%23D4A843' opacity='0.4'/> </g></svg>");
  background-position : -90px calc(100% + 90px);
  background-size     : 340px;
}

/* Table d'Iftar */
html.theme-ramadan .contact {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 300'> <g opacity='0.08' transform='rotate(16 190 150)'> <ellipse cx='190' cy='220' rx='160' ry='40' fill='%23D4A843' opacity='0.4'/> <rect x='50' y='160' width='280' height='60' rx='8' fill='%23C8940A'/> <ellipse cx='190' cy='160' rx='140' ry='22' fill='%23D4A843'/> <circle cx='80' cy='155' r='28' fill='%23D4A843'/> <circle cx='80' cy='155' r='20' fill='%238B6914'/> <circle cx='190' cy='148' r='38' fill='%23D4A843'/> <circle cx='190' cy='148' r='28' fill='%238B6914'/> <circle cx='300' cy='155' r='28' fill='%23D4A843'/> <circle cx='300' cy='155' r='20' fill='%238B6914'/> <rect x='180' y='40' width='20' height='110' rx='4' fill='%23D4A843'/> <ellipse cx='190' cy='40' rx='16' ry='30' fill='%23F57C00' opacity='0.7'/> <ellipse cx='190' cy='36' rx='10' ry='20' fill='%23FFEE58' opacity='0.8'/> <rect x='130' y='70' width='18' height='90' rx='4' fill='%23C8940A'/> <ellipse cx='139' cy='68' rx='12' ry='22' fill='%23F57C00' opacity='0.6'/> <rect x='242' y='75' width='18' height='85' rx='4' fill='%23C8940A'/> <ellipse cx='251' cy='73' rx='12' ry='22' fill='%23F57C00' opacity='0.6'/> </g></svg>");
  background-position : calc(100% + 60px) -80px;
  background-size     : 310px;
}


/* ====================================================
   HALLOWEEN
==================================================== */

/* Maison hantée */
html.theme-halloween .intro {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 480'> <g opacity='0.08'> <rect x='0' y='420' width='400' height='60' fill='%23220033'/> <rect x='100' y='225' width='200' height='195' fill='%231a0010'/> <polygon points='78,228 200,75 322,228' fill='%231a0010'/> <rect x='58' y='168' width='58' height='252' fill='%231a0010'/> <polygon points='44,172 87,86 130,172' fill='%231a0010'/> <rect x='284' y='188' width='54' height='232' fill='%231a0010'/> <polygon points='272,192 311,108 350,192' fill='%231a0010'/> <rect x='128' y='260' width='34' height='44' rx='17 17 0 0' fill='%23FF6B00' opacity='0.85'/> <rect x='238' y='260' width='34' height='44' rx='17 17 0 0' fill='%23FF6B00' opacity='0.85'/> <rect x='183' y='295' width='34' height='48' fill='%23FF6B00' opacity='0.7'/> <circle cx='320' cy='72' r='52' fill='%23FFD700' opacity='0.2'/> <circle cx='320' cy='72' r='42' fill='%23FFD700' opacity='0.15'/> <ellipse cx='58' cy='420' rx='34' ry='26' fill='%23FF6B00'/> <rect x='55' y='394' width='7' height='14' rx='3' fill='%232E7D32'/> <path d='M43,412 L53,427 L43,442' fill='none' stroke='%231a0010' stroke-width='3'/> <circle cx='70' cy='420' r='5' fill='%231a0010'/> <path d='M56,432 Q66,440 78,432' fill='none' stroke='%231a0010' stroke-width='3'/> <ellipse cx='342' cy='424' rx='30' ry='24' fill='%23FF6B00'/> <rect x='339' y='400' width='6' height='13' rx='3' fill='%232E7D32'/> <path d='M328,416 L337,430 L328,444' fill='none' stroke='%231a0010' stroke-width='2.5'/> <circle cx='355' cy='424' r='4' fill='%231a0010'/> <path d='M330,433 Q342,440 354,433' fill='none' stroke='%231a0010' stroke-width='2.5'/> <path d='M152,50 Q160,35 168,50 Q176,35 184,50' fill='%237B2FBE'/> <circle cx='168' cy='52' r='5' fill='%237B2FBE'/> <path d='M216,95 Q224,80 232,95 Q240,80 248,95' fill='%237B2FBE'/> <circle cx='232' cy='97' r='4' fill='%237B2FBE'/> </g></svg>");
  background-position : calc(100% + 100px) calc(100% + 100px);
  background-size     : 380px;
}

/* Citrouille sculptée */
html.theme-halloween .menu-section {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 300'> <g opacity='0.09' transform='rotate(-15 160 150)'> <ellipse cx='160' cy='185' rx='130' ry='100' fill='%23FF6B00'/> <ellipse cx='105' cy='175' rx='55' ry='85' fill='%23E65100'/> <ellipse cx='215' cy='175' rx='55' ry='85' fill='%23E65100'/> <ellipse cx='160' cy='175' rx='42' ry='90' fill='%23FF6B00'/> <rect x='148' y='80' width='24' height='45' rx='10' fill='%232E7D32'/> <path d='M155 90 Q140 70 125 80' fill='none' stroke='%232E7D32' stroke-width='4' stroke-linecap='round'/> <polygon points='100,180 118,155 136,180' fill='%231a0010'/> <polygon points='184,180 202,155 220,180' fill='%231a0010'/> <rect x='118' y='200' width='84' height='14' rx='4' fill='%231a0010'/> <polygon points='105,215 118,200 131,215' fill='%23FF6B00'/> <polygon points='147,215 160,200 173,215' fill='%23FF6B00'/> <polygon points='189,215 202,200 215,215' fill='%23FF6B00'/> </g></svg>");
  background-position : -90px -70px;
  background-size     : 440px;
}

/* Toile d'araignée */
html.theme-halloween .offers {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'> <g opacity='0.07' transform='rotate(8 180 180)'> <circle cx='180' cy='180' r='18' fill='%231a0010'/> <circle cx='180' cy='180' r='50' fill='none' stroke='%237B2FBE' stroke-width='1.5'/> <circle cx='180' cy='180' r='90' fill='none' stroke='%237B2FBE' stroke-width='1'/> <circle cx='180' cy='180' r='140' fill='none' stroke='%237B2FBE' stroke-width='1'/> <path d='M180,40 L180,320 M40,180 L320,180 M73,73 L287,287 M287,73 L73,287' stroke='%237B2FBE' stroke-width='0.8'/> <ellipse cx='180' cy='45' rx='16' ry='22' fill='%231a0010'/> <line x1='160' y1='38' x2='140' y2='18' stroke='%231a0010' stroke-width='2'/> <line x1='200' y1='38' x2='220' y2='18' stroke='%231a0010' stroke-width='2'/> <line x1='158' y1='48' x2='130' y2='50' stroke='%231a0010' stroke-width='2'/> <line x1='202' y1='48' x2='230' y2='50' stroke='%231a0010' stroke-width='2'/> <line x1='164' y1='58' x2='148' y2='72' stroke='%231a0010' stroke-width='2'/> <line x1='196' y1='58' x2='212' y2='72' stroke='%231a0010' stroke-width='2'/> <circle cx='166' cy='40' r='4' fill='%23FF6B00'/> <circle cx='194' cy='40' r='4' fill='%23FF6B00'/> <path d='M165,55 Q180,62 195,55' fill='none' stroke='%231a0010' stroke-width='2'/> </g></svg>");
  background-position : calc(100% + 80px) center;
  background-size     : 360px;
}

/* Chauve-souris */
html.theme-halloween .reviews {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 260'> <g opacity='0.08' transform='rotate(-10 210 130)'> <path d='M210,120 Q130,60 50,90 Q90,110 85,140 Q55,130 30,150 Q65,145 70,165 Q100,140 130,145 Q155,140 170,130 Q190,155 210,155 Q230,155 250,130 Q265,140 290,145 Q320,140 350,165 Q355,145 390,150 Q365,130 335,140 Q330,110 370,90 Q290,60 210,120Z' fill='%237B2FBE'/> <ellipse cx='210' cy='115' rx='28' ry='24' fill='%231a0010'/> <circle cx='198' cy='108' r='6' fill='%23FF6B00'/> <circle cx='222' cy='108' r='6' fill='%23FF6B00'/> <path d='M200,122 Q210,130 220,122' fill='none' stroke='%23C0C0C0' stroke-width='2'/> <line x1='205' y1='132' x2='203' y2='140' stroke='%23C0C0C0' stroke-width='1.5'/> <line x1='215' y1='132' x2='217' y2='140' stroke='%23C0C0C0' stroke-width='1.5'/> <path d='M80,30 Q100,10 120,30 Q140,10 160,30' fill='%237B2FBE' opacity='0.6'/> <ellipse cx='120' cy='32' rx='10' ry='8' fill='%231a0010' opacity='0.6'/> <path d='M280,50 Q300,30 320,50 Q340,30 360,50' fill='%237B2FBE' opacity='0.5'/> <ellipse cx='320' cy='52' rx='10' ry='8' fill='%231a0010' opacity='0.5'/> </g></svg>");
  background-position : -90px calc(100% + 90px);
  background-size     : 340px;
}

/* Cimetière */
html.theme-halloween .contact {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 320'> <g opacity='0.07' transform='rotate(12 220 160)'> <ellipse cx='220' cy='305' rx='220' ry='25' fill='%23220033'/> <rect x='55' y='170' width='40' height='70' rx='4' fill='%23424242'/> <rect x='55' y='150' width='40' height='28' rx='20 20 0 0' fill='%23424242'/> <rect x='38' y='198' width='74' height='8' rx='2' fill='%23424242'/> <rect x='140' y='155' width='44' height='85' rx='4' fill='%23424242'/> <rect x='140' y='135' width='44' height='30' rx='22 22 0 0' fill='%23424242'/> <rect x='123' y='185' width='78' height='8' rx='2' fill='%23424242'/> <rect x='240' y='175' width='36' height='65' rx='4' fill='%23424242'/> <path d='M240,175 Q258,148 276,175' fill='%23424242'/> <rect x='225' y='200' width='66' height='8' rx='2' fill='%23424242'/> <rect x='330' y='165' width='50' height='75' rx='4' fill='%23424242'/> <polygon points='330,165 355,125 380,165' fill='%23424242'/> <rect x='312' y='192' width='86' height='8' rx='2' fill='%23424242'/> <ellipse cx='100' cy='290' rx='35' ry='18' fill='%23E0E0E0' opacity='0.3'/> <ellipse cx='220' cy='294' rx='48' ry='20' fill='%23E0E0E0' opacity='0.3'/> <ellipse cx='355' cy='290' rx='38' ry='18' fill='%23E0E0E0' opacity='0.3'/> <circle cx='52' cy='120' r='22' fill='%23FFD700' opacity='0.2'/> </g></svg>");
  background-position : calc(100% + 60px) -80px;
  background-size     : 310px;
}


/* ====================================================
   ÉTÉ
==================================================== */

/* Plage + palmier */
html.theme-ete .intro {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 320'> <g opacity='0.08' transform='rotate(-14 210 160)'> <rect x='0' y='230' width='420' height='90' fill='%2300BFA6'/> <path d='M0 230 Q52 215 105 230 Q157 245 210 230 Q262 215 315 230 Q367 245 420 230' fill='%2300BFA6'/> <path d='M0 255 Q52 242 105 255 Q157 268 210 255 Q262 242 315 255 Q367 268 420 255' fill='%2300BFA6' opacity='0.5'/> <ellipse cx='210' cy='270' rx='210' ry='28' fill='%23F5DEB3'/> <path d='M80,310 Q90,230 108,165' stroke='%23795548' stroke-width='10' fill='none' stroke-linecap='round'/> <path d='M108,165 Q138,125 168,135' stroke='%232E7D32' stroke-width='5' fill='none' stroke-linecap='round'/> <path d='M108,165 Q78,120 54,135' stroke='%232E7D32' stroke-width='5' fill='none' stroke-linecap='round'/> <path d='M108,165 Q113,115 128,100' stroke='%232E7D32' stroke-width='5' fill='none' stroke-linecap='round'/> <path d='M108,165 Q143,155 166,170' stroke='%232E7D32' stroke-width='4' fill='none' stroke-linecap='round'/> <path d='M108,165 Q73,155 50,172' stroke='%232E7D32' stroke-width='4' fill='none' stroke-linecap='round'/> <line x1='310' y1='310' x2='310' y2='200' stroke='%23795548' stroke-width='5'/> <ellipse cx='310' cy='200' rx='64' ry='26' fill='%23FF9500'/> <path d='M246,200 Q278,220 310,200 Q342,220 374,200' fill='%23C62828'/> <rect x='255' y='275' width='60' height='16' rx='4' fill='%23FF9500' opacity='0.6'/> <rect x='285' y='255' width='5' height='22' rx='2' fill='%23795548'/> <circle cx='355' cy='90' r='52' fill='%23FF9500' opacity='0.4'/> <circle cx='355' cy='90' r='38' fill='%23FF9500' opacity='0.4'/> <circle cx='355' cy='90' r='26' fill='%23FFD700' opacity='0.6'/> </g></svg>");
  background-position : calc(100% + 100px) calc(100% + 100px);
  background-size     : 380px;
}

/* Soleil rayonnant */
html.theme-ete .menu-section {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'> <g opacity='0.08' transform='rotate(18 180 180)'> <circle cx='180' cy='180' r='70' fill='%23FF9500'/> <circle cx='180' cy='180' r='52' fill='%23FFD700'/> <line x1='180' y1='88' x2='180' y2='60' stroke='%23FF9500' stroke-width='8' stroke-linecap='round'/> <line x1='180' y1='272' x2='180' y2='300' stroke='%23FF9500' stroke-width='8' stroke-linecap='round'/> <line x1='88' y1='180' x2='60' y2='180' stroke='%23FF9500' stroke-width='8' stroke-linecap='round'/> <line x1='272' y1='180' x2='300' y2='180' stroke='%23FF9500' stroke-width='8' stroke-linecap='round'/> <line x1='115' y1='115' x2='95' y2='95' stroke='%23FF9500' stroke-width='7' stroke-linecap='round'/> <line x1='245' y1='115' x2='265' y2='95' stroke='%23FF9500' stroke-width='7' stroke-linecap='round'/> <line x1='115' y1='245' x2='95' y2='265' stroke='%23FF9500' stroke-width='7' stroke-linecap='round'/> <line x1='245' y1='245' x2='265' y2='265' stroke='%23FF9500' stroke-width='7' stroke-linecap='round'/> <line x1='130' y1='90' x2='120' y2='62' stroke='%23FF9500' stroke-width='5' stroke-linecap='round'/> <line x1='230' y1='90' x2='240' y2='62' stroke='%23FF9500' stroke-width='5' stroke-linecap='round'/> <line x1='90' y1='130' x2='62' y2='120' stroke='%23FF9500' stroke-width='5' stroke-linecap='round'/> <line x1='90' y1='230' x2='62' y2='240' stroke='%23FF9500' stroke-width='5' stroke-linecap='round'/> <line x1='270' y1='130' x2='298' y2='120' stroke='%23FF9500' stroke-width='5' stroke-linecap='round'/> <line x1='270' y1='230' x2='298' y2='240' stroke='%23FF9500' stroke-width='5' stroke-linecap='round'/> <line x1='130' y1='270' x2='120' y2='298' stroke='%23FF9500' stroke-width='5' stroke-linecap='round'/> <line x1='230' y1='270' x2='240' y2='298' stroke='%23FF9500' stroke-width='5' stroke-linecap='round'/> </g></svg>");
  background-position : -90px -70px;
  background-size     : 440px;
}

/* Glace colorée */
html.theme-ete .offers {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 420'> <g opacity='0.08' transform='rotate(-10 140 210)'> <polygon points='60,160 220,160 200,340 140,380 80,340' fill='%23FFCC80'/> <polygon points='60,160 140,380 80,340' fill='%23FFB74D'/> <polygon points='220,160 140,380 200,340' fill='%23FFB74D'/> <rect x='120' y='40' width='40' height='130' rx='18' fill='%23FFCC80'/> <ellipse cx='140' cy='40' rx='42' ry='42' fill='%23FF8A65'/> <ellipse cx='110' cy='28' rx='38' ry='36' fill='%23F06292'/> <ellipse cx='165' cy='32' rx='30' ry='28' fill='%23AED581'/> <ellipse cx='128' cy='18' rx='22' ry='20' fill='%23FF7043'/> <rect x='134' y='0' width='12' height='28' rx='5' fill='%23795548'/> <line x1='100' y1='175' x2='180' y2='175' stroke='%23FFB74D' stroke-width='2' opacity='0.5'/> <line x1='88' y1='210' x2='192' y2='210' stroke='%23FFB74D' stroke-width='2' opacity='0.5'/> <line x1='82' y1='250' x2='198' y2='250' stroke='%23FFB74D' stroke-width='2' opacity='0.5'/> <line x1='82' y1='290' x2='198' y2='290' stroke='%23FFB74D' stroke-width='2' opacity='0.5'/> </g></svg>");
  background-position : calc(100% + 80px) center;
  background-size     : 360px;
}

/* Vagues + bulles */
html.theme-ete .reviews {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 240'> <g opacity='0.08' transform='rotate(8 240 120)'> <path d='M0 80 Q60 50 120 80 Q180 110 240 80 Q300 50 360 80 Q420 110 480 80 L480 240 L0 240Z' fill='%2300BFA6'/> <path d='M0 110 Q60 82 120 110 Q180 138 240 110 Q300 82 360 110 Q420 138 480 110 L480 240 L0 240Z' fill='%2300BFA6' opacity='0.6'/> <path d='M0 140 Q60 116 120 140 Q180 164 240 140 Q300 116 360 140 Q420 164 480 140 L480 240 L0 240Z' fill='%2300BFA6' opacity='0.4'/> <circle cx='80' cy='38' r='10' fill='%23FFFFFF' opacity='0.5'/> <circle cx='200' cy='20' r='8' fill='%23FFFFFF' opacity='0.4'/> <circle cx='340' cy='30' r='12' fill='%23FFFFFF' opacity='0.5'/> <circle cx='430' cy='18' r='7' fill='%23FFFFFF' opacity='0.4'/> <ellipse cx='150' cy='190' rx='22' ry='22' fill='%23FFFFFF' opacity='0.2'/> <ellipse cx='320' cy='200' rx='18' ry='18' fill='%23FFFFFF' opacity='0.2'/> <path d='M30 60 Q50 45 70 60' fill='none' stroke='%23FFFFFF' stroke-width='2' opacity='0.3'/> <path d='M260 45 Q280 30 300 45' fill='none' stroke='%23FFFFFF' stroke-width='2' opacity='0.3'/> </g></svg>");
  background-position : -90px calc(100% + 90px);
  background-size     : 340px;
}

/* Cocktail tropical */
html.theme-ete .contact {
  background-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 420'> <g opacity='0.08' transform='rotate(-16 150 210)'> <polygon points='50,80 250,80 200,280 150,310 100,280' fill='%2300BFA6' opacity='0.7'/> <rect x='140' y='308' width='20' height='80' rx='4' fill='%23795548'/> <ellipse cx='150' cy='395' rx='55' ry='12' fill='%23795548' opacity='0.5'/> <ellipse cx='150' cy='80' rx='100' ry='18' fill='%2300ACC1'/> <ellipse cx='150' cy='80' rx='85' ry='14' fill='%2300BFA6'/> <ellipse cx='150' cy='130' rx='85' ry='14' fill='%23FF9500' opacity='0.3'/> <circle cx='210' cy='72' r='22' fill='%23FF9500'/> <path d='M225 58 L230 50 L235 58' fill='%23FF9500'/> <path d='M205 58 Q210 48 215 58' fill='none' stroke='%23FF9500' stroke-width='3'/> <rect x='188' y='68' width='4' height='55' rx='2' fill='%23F5DEB3'/> <circle cx='190' cy='68' r='5' fill='%23FFFFFF' opacity='0.5'/> <rect x='148' y='50' width='4' height='35' rx='2' fill='%23795548'/> <ellipse cx='150' cy='50' rx='20' ry='8' fill='%23FF9500'/> <circle cx='80' cy='150' r='8' fill='%23FFFFFF' opacity='0.3'/> <circle cx='220' cy='170' r='6' fill='%23FFFFFF' opacity='0.3'/> <circle cx='110' cy='220' r='5' fill='%23FFFFFF' opacity='0.2'/> </g></svg>");
  background-position : calc(100% + 60px) -80px;
  background-size     : 310px;
}