/* Marque White Tree : couleurs des trois cartes, pictogrammes recolorés par
   masque, feuille crème ondulée. Partagé par le menu public et la page de
   connexion. Aucun style en ligne (CSP stricte) ; aucun noir : les « encres »
   sont les teintes foncées de chaque carte. */
:root{
  --creme:#f8efe6;
}

/* Une classe par carte, posée sur <body> (ou sur n'importe quel élément) :
   --c      couleur de la carte (fond de page, bordures, pictogrammes)
   --fonce  teinte foncée (élément actif, noms de plats, prix, texte)
   --fonce-rgb  la même en composantes, pour le voile de la photo agrandie */
.carte-mornings{--c:#86a492;--fonce:#3e6a55;--fonce-rgb:62,106,85}
.carte-lunch-dinner{--c:#a5624d;--fonce:#8a4a38;--fonce-rgb:138,74,56}
.carte-drinks{--c:#f08080;--fonce:#b04444;--fonce-rgb:176,68,68}

/* Pictogramme : PNG blanc sur fond transparent utilisé comme masque, rempli
   de la couleur de la carte. Hauteur = --picto-h, largeur d'après le rapport
   propre à chaque image. */
.picto{display:inline-block;flex-shrink:0;height:var(--picto-h,58px);aspect-ratio:1;background-color:var(--c);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.picto-salade{-webkit-mask-image:url("/static/brand/picto_salad.png");mask-image:url("/static/brand/picto_salad.png");aspect-ratio:496/415}
.picto-pizza{-webkit-mask-image:url("/static/brand/picto_pizza.png");mask-image:url("/static/brand/picto_pizza.png");aspect-ratio:650/552}
.picto-cookie{-webkit-mask-image:url("/static/brand/picto_cookie.png");mask-image:url("/static/brand/picto_cookie.png");aspect-ratio:468/474}
.picto-tasse-cafe{-webkit-mask-image:url("/static/brand/picto_coffee.png");mask-image:url("/static/brand/picto_coffee.png");aspect-ratio:523/579}
.picto-oeuf{-webkit-mask-image:url("/static/brand/picto_egg.png");mask-image:url("/static/brand/picto_egg.png");aspect-ratio:498/489}
.picto-aubergine{-webkit-mask-image:url("/static/brand/picto_eggplant.png");mask-image:url("/static/brand/picto_eggplant.png");aspect-ratio:637/460}
.picto-gateau-sirop{-webkit-mask-image:url("/static/brand/picto_syrup_cake.png");mask-image:url("/static/brand/picto_syrup_cake.png");aspect-ratio:686/487}
.picto-coupe-glacee{-webkit-mask-image:url("/static/brand/picto_sundae.png");mask-image:url("/static/brand/picto_sundae.png");aspect-ratio:579/878}
.picto-taco{-webkit-mask-image:url("/static/brand/picto_taco.png");mask-image:url("/static/brand/picto_taco.png");aspect-ratio:394/308}
.picto-bouteille{-webkit-mask-image:url("/static/brand/picto_bottle.png");mask-image:url("/static/brand/picto_bottle.png");aspect-ratio:247/367}
.picto-bocal{-webkit-mask-image:url("/static/brand/picto_jar.png");mask-image:url("/static/brand/picto_jar.png");aspect-ratio:346/417}
.picto-tartine-tomates{-webkit-mask-image:url("/static/brand/picto_tomato_toast.png");mask-image:url("/static/brand/picto_tomato_toast.png");aspect-ratio:473/777}
.picto-pancakes{-webkit-mask-image:url("/static/brand/picto_pancakes.png");mask-image:url("/static/brand/picto_pancakes.png");aspect-ratio:627/451}
.picto-bol-fruits{-webkit-mask-image:url("/static/brand/picto_bowl.png");mask-image:url("/static/brand/picto_bowl.png");aspect-ratio:569/499}

/* Logos : le mot-symbole est teinté de la couleur de la carte par le même
   procédé (son PNG est terracotta sur fond transparent) ; le logo complet est
   affiché tel quel. */
.logo-mot{display:block;height:50px;width:auto;aspect-ratio:1334/405;background-color:var(--c);-webkit-mask:url("/static/brand/logo-wordmark-terracotta.png") center/contain no-repeat;mask:url("/static/brand/logo-wordmark-terracotta.png") center/contain no-repeat}
/* Image de secours : visible seulement si cette feuille de style manque. */
.logo-mot>img{display:none}

/* Feuille crème. Sans script : un rectangle aux grands coins arrondis. Avec
   js/feuille.js : le bord ondulé des menus papier, tracé en clip-path ; le
   script règle alors --onde-x / --onde-y (amplitude des vagues sur les côtés,
   en haut et en bas) pour que le contenu ne touche jamais le bord. */
.feuille{position:relative;background:var(--creme);border-radius:clamp(28px,11vw,56px)}
.feuille.feuille-ondulee{border-radius:0}